1819540 - Some HTML elements are visually glitching on android.

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[captain.fox.2k]

Attachment: video_2023-02-28_19-27-57.mp4

Steps to reproduce:

I was opening the website I'm building on my Samsung Note 20 Ultra phone which is running Android 13, OneUI 5.1, Firefox 110.0.1 which can be reached under https://test.orli.hu the login credentials are:
User: Orli_Test
Pass: Orli.ErkjT1gl8U!

After I opened the side menu a lot of components were visually glitching out such as dropdown menus and buttons, functionally they were working as supposed to.
As far as I know this only happened on my phone, everybody else I've asked said they don't experience anything like this. On other browsers like Chrome it works completely fine also other websites seem to work perfectly fine as well.
I've attached a video file which shows the glitching in effect.
I'm using 3 add-ons, Dark Reader, uBlock Origin and Privacy Badger. If I uninstall all of them or disable them the issue still persist.

about:support information from my phone:

Application Basics

Name: Firefox
Version: 110.0
Build ID: 20230213213738
Distribution ID:
User Agent: Mozilla/5.0 (Android 13; Mobile; rv:109.0) Gecko/110.0 Firefox/110.0
OS: Linux 33 #1 SMP PREEMPT Tue Jan 31 18:45:46 KST 2023
Multiprocess Windows: 0/0
Fission Windows: 0/0 Disabled by default
Remote Processes: 2
Google Location Service Key: Found
Google Safebrowsing Key: Found
Mozilla Location Service Key: Found
Safe Mode: false
Memory Size (RAM): 10.6 GB
Disk Space Available: 200 GB

Crash Reports for the Last 3 Days

Nightly Features

Remote Processes

Type: Web Content
Count: 1 / 2

Type: GPU
Count: 1

Add-ons

Name: Dark Reader
Type: extension
Version: 4.9.62
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - Ads Telemetry
Type: extension
Version: 110.0.1.0214013003
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - Browser Icons
Type: extension
Version: 110.0.1.0214013323
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - Firefox Accounts WebChannel
Type: extension
Version: 110.0.1.0214012933
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - ReaderView
Type: extension
Version: 110.0.1.0214012839
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - Search Telemetry
Type: extension
Version: 110.0.1.0214013003
Enabled: true
ID: [e-mail]

Name: Mozilla Android Components - Web Compatibility Interventions
Type: extension
Version: 110.0.0
Enabled: true
ID: [e-mail]

Name: Privacy Badger
Type: extension
Version: 2023.1.31
Enabled: true
ID: jid1-MnnxcxisBPnSXQ@jetpack

Name: uBlock Origin
Type: extension
Version: 1.47.2
Enabled: true
ID: [e-mail]

Graphics

Features
Window Device Pixel Ratios: 2.608695652173913,2.608695652173913
Compositing: WebRender
Asynchronous Pan/Zoom: touch input enabled; autoscroll enabled; smooth pinch-zoom enabled
WebGL 1 Driver WSI Info: EGL_VENDOR: Android EGL_VERSION: 1.4 Android META-EGL EGL_EXTENSIONS: EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps EGL_ANDROID_get_native_client_buffer EGL_ANDROID_presentation_time EGL_EXT_surface_CTA861_3_metadata EGL_EXT_surface_SMPTE2086_metadata EGL_KHR_get_all_proc_addresses EGL_KHR_swap_buffers_with_damage EGL_EXT_gl_colorspace_scrgb EGL_EXT_gl_colorspace_scrgb_linear EGL_EXT_gl_colorspace_display_p3_linear EGL_EXT_gl_colorspace_display_p3 EGL_EXT_gl_colorspace_display_p3_passthrough EGL_EXT_gl_colorspace_bt2020_linear EGL_EXT_gl_colorspace_bt2020_pq EGL_ANDROID_image_native_buffer EGL_ANDROID_native_fence_sync EGL_ANDROID_recordable EGL_EXT_create_context_robustness EGL_EXT_image_gl_colorspace EGL_EXT_pixel_format_float EGL_EXT_protected_content EGL_EXT_yuv_surface EGL_IMG_context_priority EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_fence_sync EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image EGL_KHR_image_base EGL_KHR_mutable_render_buffer EGL_KHR_no_config_context EGL_KHR_partial_update EGL_KHR_surfaceless_context EGL_KHR_wait_sync IsWebglOutOfProcessEnabled: 0
WebGL 1 Driver Renderer: ARM -- Mali-G77
WebGL 1 Driver Version: OpenGL ES 3.2 v1.r38p1-01bet0-mbs2v41_0.8320a750c7c9e2666df3500d139b434f
WebGL 1 Driver Extensions: GL_EXT_debug_marker GL_ARM_rgba8 GL_ARM_mali_shader_binary GL_OES_depth24 GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_EXT_read_format_bgra GL_OES_compressed_paletted_texture GL_OES_compressed_ETC1_RGB8_texture GL_OES_standard_derivatives GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_EGL_sync GL_OES_texture_npot GL_OES_vertex_half_float GL_OES_required_internalformat GL_OES_vertex_array_object GL_OES_mapbuffer GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_type_2_10_10_10_REV GL_OES_fbo_render_mipmap GL_OES_element_index_uint GL_EXT_shadow_samplers GL_OES_texture_compression_astc
GL_KHR_texture_compression_astc_ldr GL_KHR_texture_compression_astc_hdr GL_KHR_texture_compression_astc_sliced_3d GL_EXT_texture_compression_astc_decode_mode GL_EXT_texture_compression_astc_decode_mode_rgb9e5 GL_KHR_debug GL_EXT_occlusion_query_boolean GL_EXT_disjoint_timer_query GL_EXT_blend_minmax GL_EXT_discard_framebuffer GL_OES_get_program_binary GL_OES_texture_3D GL_EXT_texture_storage GL_EXT_multisampled_render_to_texture GL_EXT_multisampled_render_to_texture2 GL_OES_surfaceless_context GL_OES_texture_stencil8 GL_EXT_shader_pixel_local_storage GL_ARM_shader_framebuffer_fetch GL_ARM_shader_framebuffer_fetch_depth_stencil GL_ARM_mali_program_binary GL_EXT_sRGB GL_EXT_sRGB_write_control GL_EXT_texture_sRGB_decode GL_EXT_texture_sRGB_R8 GL_EXT_texture_sRGB_RG8 GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_OES_texture_storage_multisample_2d_array GL_OES_shader_image_atomic GL_EXT_robustness GL_EXT_draw_buffers_indexed GL_OES_draw_buffers_indexed GL_EXT_texture_border_clamp GL_OES_texture_border_clamp GL_EXT_texture_cube_map_array GL_OES_texture_cube_map_array GL_OES_sample_variables GL_OES_sample_shading GL_OES_shader_multisample_interpolation GL_EXT_shader_io_blocks GL_OES_shader_io_blocks GL_EXT_tessellation_shader GL_OES_tessellation_shader GL_EXT_primitive_bounding_box GL_OES_primitive_bounding_box GL_EXT_geometry_shader GL_OES_geometry_shader GL_ANDROID_extension_pack_es31a GL_EXT_gpu_shader5 GL_OES_gpu_shader5 GL_EXT_texture_buffer GL_OES_texture_buffer GL_EXT_copy_image GL_OES_copy_image GL_EXT_shader_non_constant_global_initializers GL_EXT_color_buffer_half_float GL_EXT_unpack_subimage GL_EXT_color_buffer_float GL_EXT_float_blend GL_EXT_YUV_target GL_OVR_multiview GL_OVR_multiview2 GL_OVR_multiview_multisampled_render_to_texture GL_KHR_robustness GL_KHR_robust_buffer_access_behavior GL_EXT_draw_elements_base_vertex GL_OES_draw_elements_base_vertex GL_EXT_protected_textures GL_EXT_buffer_storage GL_EXT_external_buffer GL_EXT_EGL_image_array GL_EXT_texture_filter_anisotropic GL_OES_texture_float_linear GL_ARM_texture_unnormalized_coordinates GL_EXT_shader_framebuffer_fetch GL_EXT_clip_control
WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_float_blend EXT_sRGB EXT_texture_filter_anisotropic MOZ_debug OES_element_index_uint OES_fbo_render_mipmap OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_lose_context
WebGL 2 Driver WSI Info: EGL_VENDOR: Android EGL_VERSION: 1.4 Android META-EGL EGL_EXTENSIONS: EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps EGL_ANDROID_get_native_client_buffer EGL_ANDROID_presentation_time EGL_EXT_surface_CTA861_3_metadata EGL_EXT_surface_SMPTE2086_metadata EGL_KHR_get_all_proc_addresses EGL_KHR_swap_buffers_with_damage EGL_EXT_gl_colorspace_scrgb EGL_EXT_gl_colorspace_scrgb_linear EGL_EXT_gl_colorspace_display_p3_linear EGL_EXT_gl_colorspace_display_p3 EGL_EXT_gl_colorspace_display_p3_passthrough EGL_EXT_gl_colorspace_bt2020_linear EGL_EXT_gl_colorspace_bt2020_pq EGL_ANDROID_image_native_buffer EGL_ANDROID_native_fence_sync EGL_ANDROID_recordable EGL_EXT_create_context_robustness EGL_EXT_image_gl_colorspace EGL_EXT_pixel_format_float EGL_EXT_protected_content EGL_EXT_yuv_surface EGL_IMG_context_priority EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_fence_sync EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image EGL_KHR_image_base EGL_KHR_mutable_render_buffer EGL_KHR_no_config_context EGL_KHR_partial_update EGL_KHR_surfaceless_context EGL_KHR_wait_sync IsWebglOutOfProcessEnabled: 0
WebGL 2 Driver Renderer: ARM -- Mali-G77
WebGL 2 Driver Version: OpenGL ES 3.2 v1.r38p1-01bet0-mbs2v41_0.8320a750c7c9e2666df3500d139b434f
WebGL 2 Driver Extensions: GL_EXT_debug_marker GL_ARM_rgba8 GL_ARM_mali_shader_binary GL_OES_depth24 GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_EXT_read_format_bgra GL_OES_compressed_paletted_texture GL_OES_compressed_ETC1_RGB8_texture GL_OES_standard_derivatives GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_EGL_sync GL_OES_texture_npot GL_OES_vertex_half_float GL_OES_required_internalformat GL_OES_vertex_array_object GL_OES_mapbuffer GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_type_2_10_10_10_REV GL_OES_fbo_render_mipmap GL_OES_element_index_uint GL_EXT_shadow_samplers GL_OES_texture_compression_astc GL_KHR_texture_compression_astc_ldr GL_KHR_texture_compression_astc_hdr GL_KHR_texture_compression_astc_sliced_3d GL_EXT_texture_compression_astc_decode_mode GL_EXT_texture_compression_astc_decode_mode_rgb9e5 GL_KHR_debug GL_EXT_occlusion_query_boolean GL_EXT_disjoint_timer_query GL_EXT_blend_minmax GL_EXT_discard_framebuffer GL_OES_get_program_binary GL_OES_texture_3D GL_EXT_texture_storage GL_EXT_multisampled_render_to_texture GL_EXT_multisampled_render_to_texture2 GL_OES_surfaceless_context GL_OES_texture_stencil8 GL_EXT_shader_pixel_local_storage GL_ARM_shader_framebuffer_fetch GL_ARM_shader_framebuffer_fetch_depth_stencil GL_ARM_mali_program_binary GL_EXT_sRGB GL_EXT_sRGB_write_control GL_EXT_texture_sRGB_decode GL_EXT_texture_sRGB_R8 GL_EXT_texture_sRGB_RG8 GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_OES_texture_storage_multisample_2d_array GL_OES_shader_image_atomic GL_EXT_robustness GL_EXT_draw_buffers_indexed GL_OES_draw_buffers_indexed GL_EXT_texture_border_clamp GL_OES_texture_border_clamp GL_EXT_texture_cube_map_array GL_OES_texture_cube_map_array GL_OES_sample_variables GL_OES_sample_shading GL_OES_shader_multisample_interpolation GL_EXT_shader_io_blocks GL_OES_shader_io_blocks GL_EXT_tessellation_shader GL_OES_tessellation_shader GL_EXT_primitive_bounding_box GL_OES_primitive_bounding_box GL_EXT_geometry_shader GL_OES_geometry_shader GL_ANDROID_extension_pack_es31a GL_EXT_gpu_shader5 GL_OES_gpu_shader5 GL_EXT_texture_buffer GL_OES_texture_buffer GL_EXT_copy_image GL_OES_copy_image GL_EXT_shader_non_constant_global_initializers GL_EXT_color_buffer_half_float GL_EXT_unpack_subimage GL_EXT_color_buffer_float GL_EXT_float_blend GL_EXT_YUV_target GL_OVR_multiview GL_OVR_multiview2 GL_OVR_multiview_multisampled_render_to_texture GL_KHR_robustness GL_KHR_robust_buffer_access_behavior GL_EXT_draw_elements_base_vertex GL_OES_draw_elements_base_vertex GL_EXT_protected_textures GL_EXT_buffer_storage GL_EXT_external_buffer GL_EXT_EGL_image_array GL_EXT_texture_filter_anisotropic GL_OES_texture_float_linear GL_ARM_texture_unnormalized_coordinates GL_EXT_shader_framebuffer_fetch GL_EXT_clip_control
WebGL 2 Extensions: EXT_color_buffer_float EXT_float_blend EXT_texture_filter_anisotropic MOZ_debug OES_draw_buffers_indexed OES_texture_float_linear OVR_multiview2 WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Target Frame Rate: 60
GPU #1
Active: Yes
Description: Model: SM-N986B, Product: c2sxeea, Manufacturer: samsung, Hardware: exynos990, OpenGL: ARM -- Mali-G77 -- OpenGL ES 3.2 v1.r38p1-01bet0-mbs2v41_0.8320a750c7c9e2666df3500d139b434f
Vendor ID: ARM
Device ID: Mali-G77
Driver Version: OpenGL ES 3.2 v1.r38p1-01bet0-mbs2v41_0.8320a750c7c9e2666df3500d139b434f
RAM: 0

Diagnostics
AzureCanvasBackend: skia
AzureCanvasBackend (UI Process): skia
AzureContentBackend: skia
AzureContentBackend (UI Process): skia
AzureFallbackCanvasBackend (UI Process): skia
CMSOutputProfile: Empty profile data
Display0: 1080x2316@60Hz scales:2.625000|1.000000
DisplayCount: 1
GPUProcessPid: 2259
Decision Log
HW_COMPOSITING:
default: available
user: force_enabled
OPENGL_COMPOSITING:
default: available
user: force_enabled
GPU_PROCESS:
default: available
WEBRENDER:
default: available
WEBRENDER_COMPOSITOR:
default: disabled
WEBRENDER_PARTIAL:
default: available
WEBRENDER_SHADER_CACHE:
default: available
WEBRENDER_OPTIMIZED_SHADERS:
default: available
WEBRENDER_ANGLE:
default: available
env: unavailable
WEBRENDER_DCOMP_PRESENT:
default: available
user: disabled
env: unavailable
runtime: unavailable
WEBGPU:
default: disabled
runtime: blocked
VP8_HW_DECODE:
default: available
VP9_HW_DECODE:
default: available
BACKDROP_FILTER:
default: available
CANVAS_RENDERER_THREAD:
default: blocked
ACCELERATED_CANVAS2D:
default: disabled

Media

Audio Backend: aaudio
Max Channels: 2
Preferred Sample Rate: 48000
Roundtrip latency (standard deviation): ...
Output Devices
Name: Group
Default audio output device:
Input Devices
Name: Group
Default audio input device:

Enumerate database

Environment Variables

Important Modified Preferences

browser.search.region: HU
extensions.lastAppVersion: 110.0
idle.lastDailyNotification: 1677598162
media.gmp.storage.version.observed: 1
network.dns.disablePrefetch: true
network.http.speculative-parallel-limit: 0
network.predictor.enabled: false
network.prefetch-next: false
privacy.purge_trackers.date_in_cookie_database: 0
privacy.purge_trackers.last_purge: 1677598162940
storage.vacuum.last.index: 0

Important Locked Preferences

fission.autostart.session: false

Accessibility

Activated: false
Prevent Accessibility: 0

Library Versions

NSPR
Expected minimum version: 4.35
Version in use: 4.35

NSS
Expected minimum version: 3.87.1
Version in use: 3.87.1

NSSSMIME
Expected minimum version: 3.87.1
Version in use: 3.87.1

NSSSSL
Expected minimum version: 3.87.1
Version in use: 3.87.1

NSSUTIL
Expected minimum version: 3.87.1
Version in use: 3.87.1

Startup Cache

Disk Cache Path: /data/user/0/org.mozilla.firefox/files/mozilla/1d186eat.default/startupCache/startupCache.8.little
Ignore Disk Cache: false
Found Disk Cache on Init: false
Wrote to Disk Cache: true

Internationalization & Localization

Application Settings
Requested Locales: ["en-GB"]
Available Locales: ["an","ar","ast","az","be","bg","bn","br","bs","ca","cak","cs","cy","da","de","dsb","el","en-CA","en-GB","en-US","eo","es-AR","es-CL","es-ES","es-MX","et","eu","fa","ff","fi","fr","fy-NL","ga-IE","gd","gl","gn","gu-IN","he","hi-IN","hr","hsb","hu","hy-AM","id","is","it","ja","ka","kab","kk","kn","ko","lij","lo","lt","lv","ml","mr","ms","my","nb-NO","ne-NP","nl","nn-NO","oc","pa-IN","pl","pt-BR","pt-PT","rm","ro","ru","sk","sl","son","sq","sr","sv-SE","ta","te","th","tr","trs","uk","ur","uz","vi","wo","xh","zam","zh-CN","zh-TW"]
App Locales: ["en-GB","en-US","en-CA"]
Regional Preferences: ["en-GB"]
Default Locale: "en-US"
Operating System
System Locales: ["en-GB"]
Regional Preferences: ["en-GB"]

Remote Debugging (Chromium Protocol)

Accepting Connections: false
URL:

Actual results:

Some HTML elements mainly the sidebar with the dropdown menus were glitching out, sometimes the dropdown menus showed a mixed bag of other images or icons that can be found on the website instead of the menu it was supposed to. The side menu opening button would sometimes disappear.
The website is using React with NextJS framework.

Expected results:

The elements in question shouldn't have glitched. The dropdown menu on open should have showed the buttons under it, the side menu button should have not disappear.

Comment 1

[Timothy Nikkel (:tnikkel)]

Thanks for the testcase, video, and about support!

I tried to reproduce on my Samsung A33 and Pixel 2 but the site seemed to work fine to me. Maybe it's something specific to your hardware. Maybe someone else has more similar hardware.

Comment 2

[Sotaro Ikeda [:sotaro]]

From Bug 1685276, :jnicol seemed have a device with Mali-G77.

:jnicol, do you have a device with Mali-G77?

Comment 3

[08xjcec48]

Another OneUI 5.1 user reported the same issue on Reddit: https://old.reddit.com/r/firefox/comments/11hrswn

Comment 4

[captain.fox.2k]

I've visited the websites with my phone the other user reported that they had problems on, but the glitches don't happen for me on those sites.

Comment 5

[Jamie Nicol [:jnicol]]

I can reproduce on my Samsung S20 Plus, updated to Android 13. Driver version r38p1.

I believe this is another case of bug 1787520 and bug 1795614. The G77 is the same family of GPU as the G78 and G710 in those bugs, but it must have taken a while for devices with the older GPU to be updated to a recent enough driver version that contains the bug.

Comment 6

[Jamie Nicol [:jnicol]]

Attachment: Bug 1819540 - Apply Mali driver bug workaround on additional GPU. r?#gfx-reviewers

In bug 1787520 and bug 1795614 we added a workaround for a driver bug
on Mali G78 and G710 GPUs. It turns out this also affects the G77, now
that some devices have received software updates containing an updated
driver version. This patch applies the workaround to the G77 as well,
as long as the driver version is affected.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3bf5fce9130e
Apply Mali driver bug workaround on additional GPU. r=gfx-reviewers,lsalzman

Comment 8

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/3bf5fce9130e

Comment 9

[Jamie Nicol [:jnicol]]

Comment on attachment 9321409 [details]
Bug 1819540 - Apply Mali driver bug workaround on additional GPU. r?#gfx-reviewers

Beta/Release Uplift Approval Request

• User impact if declined: Corrupt rendering on a variety of websites for users with Mali G77 GPUs running Android 13 (includes ~2 year old samsung flagships)
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Disables an optimisation thereby avoiding a buggy path in the driver. This has been shipping in release to users with similar GPUs so we know it fixes the bug and is unlikely to cause other issues
• String changes made/needed:
• Is Android affected?: Yes

Comment 10

[Donal Meehan [:dmeehan]]

Comment on attachment 9321409 [details]
Bug 1819540 - Apply Mali driver bug workaround on additional GPU. r?#gfx-reviewers

111 is now in RC, changing the beta uplift request to a release uplift request. This will be included for consideration for a later 111 release build.
If it is not intended to request for release, please cancel the request.

Comment 11

[Donal Meehan [:dmeehan]]

Comment on attachment 9321409 [details]
Bug 1819540 - Apply Mali driver bug workaround on additional GPU. r?#gfx-reviewers

Approved for 111.0.1 and Fenix/Focus 111.1.0

Comment 12

[Donal Meehan [:dmeehan]]

https://hg.mozilla.org/releases/mozilla-release/rev/f2c635c115b3