Skip to content

Official Mapbox example renders symbol labels and icons skewed and overlapping on Samsung Xclipse 940 in Chrome 151 #13713

Description

@chris-vorster

mapbox-gl-js version

v3.28.0 (the version currently used by the official simple-map example)

Browser and version

Chrome 151.0.7922.108 on Android 16 (BP4A.251205.006), Samsung SM-S731B

Expected behavior

The official Mapbox GL JS simple-map example should render all symbol-layer text and icons with correct glyph geometry, alignment, spacing, and placement on supported Android devices. The same issue affects our production environment.

Actual behavior

On this physical Samsung device, symbol-layer labels and icons render with visibly corrupted geometry: glyphs are skewed, smeared, displaced, or overlap adjacent glyphs. In the official simple-map example, labels such as South Africa and Kimberley visibly break while the underlying fill, road, boundary, and background layers remain aligned.

This is not limited to our application. It reproduces directly on Mapbox's official example using Mapbox GL JS v3.28.0:

https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

The same class of corruption occurs in our application with both street and satellite-streets styles. It only affects certain physical phones; other devices running the same deployed application version render correctly. Reinstalling the PWA, clearing browser/site cache, bypassing service-worker caching for Mapbox requests, testing older deployments, upgrading and pinning Mapbox GL JS, disabling CSS backdrop filters, and using preserveDrawingBuffer: false did not eliminate it.

The affected phone's GPU report identifies the renderer as Samsung Xclipse 940 through ANGLE on Vulkan. Hardware acceleration is active, the GPU process crash count is 0, and the report contains no GPU log messages.

Link to the demonstration

https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

Steps to trigger the unexpected behavior

  1. On a Samsung SM-S731B running Android 16 (build BP4A.251205.006), open Chrome 151.0.7922.108.
  2. Navigate to https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
  3. Scroll to the live JavaScript map example.
  4. Observe the symbol labels at the initial view over South Africa.
  5. Pan or zoom the map and inspect additional place labels and icons.

Actual result: portions of labels and icons are skewed, smeared, displaced, or overlap. The base map geometry remains coherent.

Image

Relevant log output

Graphics Feature Status
=======================
Canvas: Hardware accelerated
Compositing: Hardware accelerated
OpenGL: Enabled
Rasterization: Hardware accelerated
Vulkan: Enabled
WebGL: Hardware accelerated
WebGPU: Hardware accelerated

Version Information
===================
Chrome version: Chrome/151.0.7922.108
Operating system: Android 16 BP4A.251205.006
ANGLE commit id: a17d5224d83f

Driver Information
==================
GPU0: VENDOR=0x144d [Google Inc. (Samsung Electronics Co., Ltd.)]
DEVICE=0x2600200 [ANGLE (Samsung Electronics Co. Ltd., ANGLE ((Samsung Xclipse 940) on Vulkan 1.3.279), OpenGL ES 3.2 Driver version: 24.1.307 git hash: 86f99cfe6317)]
Machine model name: SM-S731B
GL implementation parts: (gl=egl-angle,angle=opengles)
Display type: ANGLE_OPENGLES
GL_VENDOR: Google Inc. (Samsung Electronics Co., Ltd.)
GL_RENDERER: ANGLE (Samsung Electronics Co. Ltd., ANGLE ((Samsung Xclipse 940) on Vulkan 1.3.279), OpenGL ES 3.2 Driver version: 24.1.307 git hash: 86f99cfe6317)
GL_VERSION: OpenGL ES 3.0 (ANGLE 2.1.28232 git hash: a17d5224d83f)
GPU process crash count: 0

Driver Bug Workarounds
======================
dont_delete_source_texture_for_egl_image
exit_on_context_lost
force_enable_color_buffer_float_except_rgb32f
max_msaa_sample_count_4
remove_dynamic_indexing_of_swizzled_vector
use_virtualized_gl_contexts
webgl_or_caps_max_texture_size_limit_8192
disabled_extension_GL_KHR_blend_equation_advanced
disabled_extension_GL_KHR_blend_equation_advanced_coherent

Relevant enabled ANGLE features
===============================
reapplyUBOBindingsAfterUsingBinaryProgram: Enabled
removeDynamicIndexingOfSwizzledVector: Enabled
alwaysCallUseProgramAfterLink: Enabled
clampArrayAccess: Enabled
loseContextOnOutOfMemory: Enabled
limitWebglMaxTextureSizeTo8192: Enabled

Problems Detected
=================
Remove dynamic indexing for swizzled vectors on Android:
Applied Workarounds: remove_dynamic_indexing_of_swizzled_vector

ANGLE cannot recover from context lost:
Applied Workarounds: exit_on_context_lost

Log Messages
============
(empty)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions