HTML Elements glitching on my website
Hi! A weird visual glitch has been happening all over on the website I'm building, it only happens on my phone and only with Firefox, everybody else I asked say they don't experience anything like this. On other browsers like chrome it works fine. Other websites seem to work perfectly fine. My phone is a Samsung Note 20 Ultra running Android 13, OneUI 5.1 and Firefox 110.0.1. I'm using 3 add-ons: Privacy Badger Dark Reader UBlock Origin
If I uninstall all of them the issue still persists. The website is using React with NextJs framework. What could cause this and what can I do to fix it?
The website in question can be reached under https://test.orli.hu It is a development test build so it is locked behind a login screen. The credentials are: User: Orli_Test Pass: Orli.ErkjT1gl8U!
about:support information:
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: addon@darkreader.org
Name: Mozilla Android Components - Ads Telemetry Type: extension Version: 110.0.1.0214013003 Enabled: true ID: ads@mozac.org
Name: Mozilla Android Components - Browser Icons Type: extension Version: 110.0.1.0214013323 Enabled: true ID: icons@mozac.org
Name: Mozilla Android Components - Firefox Accounts WebChannel Type: extension Version: 110.0.1.0214012933 Enabled: true ID: fxa@mozac.org
Name: Mozilla Android Components - ReaderView Type: extension Version: 110.0.1.0214012839 Enabled: true ID: readerview@mozac.org
Name: Mozilla Android Components - Search Telemetry Type: extension Version: 110.0.1.0214013003 Enabled: true ID: cookies@mozac.org
Name: Mozilla Android Components - Web Compatibility Interventions Type: extension Version: 110.0.0 Enabled: true ID: webcompat@mozilla.org
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: uBlock0@raymondhill.net
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:
Змінено
Обране рішення
It seems to have been a graphics bug within Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1819540
Читати цю відповідь у контексті 👍 0Усі відповіді (9)
Hi
Please can you try without the three add-ons installed.
Hi!
I have already tried and the issue still persists, I've also noted this in the description.
What level of enhanced tracking protection do you have set?
Standard
Do you have any open website available that we can use to look into this further with?
Yes, as I have mentioned it in the description: " The website in question can be reached under https://test.orli.hu It is a development test build so it is locked behind a login screen. The credentials are: User: Orli_Test Pass: Orli.ErkjT1gl8U! "
I have tried the site and am not getting any glitches.
Have you tried clearing the app cache from within the Android Settings app?
I have tried it now, but the glitches still happen.
Вибране рішення
It seems to have been a graphics bug within Firefox. https://bugzilla.mozilla.org/show_bug.cgi?id=1819540