Closed Bug 1765862 Opened 3 years ago Closed 3 years ago

Glitches on Steamdb page with Backdrop:filter enabled (Was:Some Websites no longer display correctly)

Categories

(Core :: Graphics: WebRender, defect, P3)

Product:
Core
Component:
Graphics: WebRender
Platform:
x86_64
Windows 10
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
102 Branch
Tracking Flags:
Tracking Status
firefox102 --- verified

People

(Reporter: lh.bennett, Assigned: gw)

References

(
URL
)

Details

Attachments

(3 files)

test-case
613 bytes, text/html
Details
Browsers disagree on how to treat visibility: visible descendants.
839 bytes, text/html
Details
Bug 1765862 - Skip backdrop-filter if `nsIFrame` reports not visible for painting
48 bytes, text/x-phabricator-request
Details | Review

Some websites have had graphics corruption over the last couple of days in Nightly. In some cases, the GPU process will spike to 100% then crash and recover.

Simply, visit https://steamdb.info/ and click on the search box to see an example.
Visit https://www.klfy.com/ for a more EXTREME example.

=============================================================

Graphics
Features
Compositing WebRender
Asynchronous Pan/Zoom wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled; smooth pinch-zoom enabled
WebGL 1 Driver WSI Info EGL_VENDOR: Google Inc. (AMD)
EGL_VERSION: 1.5 (ANGLE 2.1.15727 git hash: 23851a53779d)
EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_display_semaphore_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_ANGLE_create_context_extensions_enabled EGL_ANDROID_blob_cache EGL_ANDROID_recordable EGL_ANGLE_image_d3d11_texture EGL_ANGLE_create_context_backwards_compatible EGL_KHR_create_context_no_error EGL_KHR_reusable_sync
EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_device_query EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_platform_angle_d3d11on12 EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses EGL_KHR_debug EGL_ANGLE_explicit_context EGL_ANGLE_feature_control
IsWebglOutOfProcessEnabled: 1
WebGL 1 Driver Renderer Google Inc. (AMD) -- ANGLE (AMD, AMD Radeon RX 5700 Direct3D11 vs_5_0 ps_5_0, D3D11-30.0.15021.1001)
WebGL 1 Driver Version OpenGL ES 2.0.0 (ANGLE 2.1.15727 git hash: 23851a53779d)
WebGL 1 Driver Extensions GL_ANGLE_base_vertex_base_instance GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_explicit_context GL_ANGLE_explicit_context_gles1 GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_get_serialized_context_string GL_ANGLE_get_tex_level_parameter GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_memory_size GL_ANGLE_multi_draw GL_ANGLE_multiview_multisample GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_provoking_vertex GL_ANGLE_request_extension GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_color_buffer_float_rgb GL_CHROMIUM_color_buffer_float_rgba GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_lose_context GL_CHROMIUM_sync_query GL_EXT_EGL_image_external_wrap_modes GL_EXT_blend_func_extended GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_frag_depth GL_EXT_instanced_arrays GL_EXT_map_buffer_range GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_bptc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_KHR_no_error GL_KHR_parallel_shader_compile GL_KHR_robust_buffer_access_behavior GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_compressed_EAC_R11_signed_texture GL_OES_compressed_EAC_R11_unsigned_texture GL_OES_compressed_EAC_RG11_signed_texture GL_OES_compressed_EAC_RG11_unsigned_texture GL_OES_compressed_ETC2_RGB8_texture GL_OES_compressed_ETC2_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_sRGB8_alpha_texture GL_OES_compressed_ETC2_sRGB8_alpha8_texture GL_OES_compressed_ETC2_sRGB8_texture GL_OES_depth24 GL_OES_depth32 GL_OES_draw_elements_base_vertex GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_vertex_array_object GL_WEBGL_video_texture
WebGL 1 Extensions ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_float_blend EXT_frag_depth EXT_shader_texture_lod EXT_sRGB EXT_texture_compression_bptc EXT_texture_compression_rgtc 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_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
WebGL 2 Driver WSI Info EGL_VENDOR: Google Inc. (AMD)
EGL_VERSION: 1.5 (ANGLE 2.1.15727 git hash: 23851a53779d)
EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_display_semaphore_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_ANGLE_create_context_extensions_enabled EGL_ANDROID_blob_cache EGL_ANDROID_recordable EGL_ANGLE_image_d3d11_texture EGL_ANGLE_create_context_backwards_compatible EGL_KHR_create_context_no_error EGL_KHR_reusable_sync
EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_device_query EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_platform_angle_d3d11on12 EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses EGL_KHR_debug EGL_ANGLE_explicit_context EGL_ANGLE_feature_control
IsWebglOutOfProcessEnabled: 1
WebGL 2 Driver Renderer Google Inc. (AMD) -- ANGLE (AMD, AMD Radeon RX 5700 Direct3D11 vs_5_0 ps_5_0, D3D11-30.0.15021.1001)
WebGL 2 Driver Version OpenGL ES 3.0.0 (ANGLE 2.1.15727 git hash: 23851a53779d)
WebGL 2 Driver Extensions GL_ANGLE_base_vertex_base_instance GL_ANGLE_client_arrays GL_ANGLE_copy_texture_3d GL_ANGLE_depth_texture GL_ANGLE_explicit_context GL_ANGLE_explicit_context_gles1 GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_get_serialized_context_string GL_ANGLE_get_tex_level_parameter GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_memory_size GL_ANGLE_multi_draw GL_ANGLE_multiview_multisample GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_provoking_vertex GL_ANGLE_request_extension GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_multisample GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_lose_context GL_CHROMIUM_sync_query GL_EXT_EGL_image_external_wrap_modes GL_EXT_blend_func_extended GL_EXT_blend_minmax GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_frag_depth GL_EXT_instanced_arrays GL_EXT_map_buffer_range GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_bptc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_KHR_no_error GL_KHR_parallel_shader_compile GL_KHR_robust_buffer_access_behavior GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_EAC_R11_signed_texture GL_OES_compressed_EAC_R11_unsigned_texture GL_OES_compressed_EAC_RG11_signed_texture GL_OES_compressed_EAC_RG11_unsigned_texture GL_OES_compressed_ETC2_RGB8_texture GL_OES_compressed_ETC2_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_sRGB8_alpha_texture GL_OES_compressed_ETC2_sRGB8_alpha8_texture GL_OES_compressed_ETC2_sRGB8_texture GL_OES_depth24 GL_OES_depth32 GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_vertex_array_object GL_OVR_multiview GL_OVR_multiview2 GL_WEBGL_video_texture
WebGL 2 Extensions EXT_color_buffer_float EXT_float_blend EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic MOZ_debug OES_texture_float_linear OVR_multiview2 WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Direct2D true
Target Frame Rate 60
DirectWrite true (10.0.19041.1566)
GPU #1
Active Yes
Description AMD Radeon RX 5700
Vendor ID 0x1002
Device ID 0x731f
Driver Version 30.0.15021.1001
Driver Date 3-31-2022
Drivers aticfx64 aticfx64 aticfx64 amdxc64 aticfx32 aticfx32 aticfx32 amdxc32 amdxn64 atidxx64 atidxx64 amdxn32 atidxx32 atidxx32 atiumdva atiumd6a
Subsys ID 57051682
RAM 8176
GPU #2
Active No
Description Intel(R) HD Graphics 4000
Vendor ID 0x8086
Device ID 0x0162
Driver Version 10.18.10.5161
Driver Date 8-6-2020
Drivers igdumdim64 igd10iumd64 igd10iumd64 igdumdim32 igd10iumd32 igd10iumd32
Subsys ID 0000000c
RAM 0
Diagnostics
AzureCanvasBackend direct2d 1.1
AzureCanvasBackend (UI Process) skia
AzureContentBackend skia
AzureContentBackend (UI Process) skia
AzureFallbackCanvasBackend (UI Process) skia
CMSOutputProfile 10516 bytes, too large
Display0 1920x1080@60Hz : AMD Radeon RX 5700
Display1 1920x1080@59Hz : AMD Radeon RX 5700
DisplayCount 2
HardwareStretching both=0 window-only=0 full-screen-only=2 none=0 error=0
GPUProcessPid 11036
GPUProcess
Device Reset
ClearType Parameters \.\DISPLAY1 [ Gamma: 2.2 Pixel Structure: RGB ClearType Level: 50 Enhanced Contrast: 100 ] \.\DISPLAY2 [ Gamma: 2.2 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 50 ]
Decision Log
HW_COMPOSITING
available by default
D3D11_COMPOSITING
available by default
DIRECT2D
available by default
D3D11_HW_ANGLE
available by default
GPU_PROCESS
available by default
WEBRENDER
available by default
WEBRENDER_QUALIFIED
available by default
WEBRENDER_COMPOSITOR
available by default
WEBRENDER_PARTIAL
available by default
WEBRENDER_SHADER_CACHE
available by default
WEBRENDER_OPTIMIZED_SHADERS
available by default
WEBRENDER_ANGLE
available by default
WEBRENDER_DCOMP_PRESENT
available by default
WEBRENDER_SOFTWARE
available by default
WEBGPU
disabled by default: Disabled by default
WINDOW_OCCLUSION
available by default
VIDEO_OVERLAY
available by default
HW_DECODED_VIDEO_NO_COPY
blocked by default: Blocklisted by gfxInfo
VP8_HW_DECODE
available by default
VP9_HW_DECODE
available by default
Failure Log
(#0) Error Killing GPU process due to IPC reply timeout
(#4) Error Receive IPC close with reason=AbnormalShutdown
(#5) Error Receive IPC close with reason=AbnormalShutdown
(#6) Error Receive IPC close with reason=AbnormalShutdown
(#7) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#8) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#9) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#10) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#11) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#12) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#13) CP+[GFX1-]: IPC Channel is already torn down unexpectedly
(#14) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#15) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#16) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#17) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown
(#18) CP+[GFX1-]: Receive IPC close with reason=AbnormalShutdown

Both of these webpages contain backdrop-filter. Reporter, do these pages display correctly after setting layout.css.backdrop-filter.enabled to false in about:config and restarting Firefox?

Flags: needinfo?(lh.bennett)

(In reply to G from comment #1)

Both of these webpages contain backdrop-filter. Reporter, do these pages display correctly after setting layout.css.backdrop-filter.enabled to false in about:config and restarting Firefox?

Yes. They render normally if that is disabled, and I didn't need to restart. The change was instant.

Flags: needinfo?(lh.bennett)
Blocks: 1749625
Summary: Some Websites no longer display correctly → Glitches on Steamdb page with Backdrop:filter enabled (Was:Some Websites no longer display correctly)
Status: UNCONFIRMED → NEW
Ever confirmed: true

Do you know if / when you may have toggled that flag to enable backdrop-filter? (I just want to make sure it wasn't somehow left enabled for some portion of users when it was disabled by default a few months ago).

Flags: needinfo?(lh.bennett)

(In reply to Glenn Watson [:gw] from comment #3)

Do you know if / when you may have toggled that flag to enable backdrop-filter? (I just want to make sure it wasn't somehow left enabled for some portion of users when it was disabled by default a few months ago).

It was in the user.js file from an alternative theme project called "Lepton" I had installed a while back. https://github.com/black7375/Firefox-UI-Fix

Flags: needinfo?(lh.bennett)

Ah, that would explain it then, thanks.

Severity: -- → S4
Priority: -- → P3
See Also: → 1765684, 1766423

A minimal reduced test case for https://www.klfy.com/ is:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.site-header {
				position: relative;
				z-index: 7;
			}
			.dropnav {
				visibility: hidden;
			}
			.dropnav:after {
				-webkit-backdrop-filter:blur(5px);
				backdrop-filter:blur(5px);
				content:"";
				height:calc(100vh - 70px);
				position:fixed;
				width:100%;
			}
		</style>
	</head>
	<body>
		<header class="site-header">
			<div class="dropnav">
				<span>App</span>
			</div>
		</header>
		<div style="position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background: blue;"></div>
	</body>
</html>
Assignee: nobody → gwatson
Status: NEW → ASSIGNED

The attached patch fixes the glitches on https://www.klfy.com/.

I wasn't able to see any glitches at all on https://steamdb.info/ however - this might be because it requires a certain platform or other condition to trigger, or it might be because it's been fixed by some of the other backdrop-filter fixes that are in the landing queue.

Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/2aba789f4df3 Skip backdrop-filter if `nsIFrame` reports not visible for painting r=gfx-reviewers,lsalzman

https://hg.mozilla.org/mozilla-central/rev/2aba789f4df3

Status: ASSIGNED → RESOLVED
Closed: 3 years ago
status-firefox102: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 102 Branch
Blocks: 1600485
Flags: qe-verify+

Reproduced this issue on https://steamdb.info/ on an affected Nightly build from 2022-04-20, Win 10 x64.
Verified as fixed on Firefox 102.0b4 (20220605185654) on Win 10 x64 and Ubuntu 21.04, macOS 10.15.

Status: RESOLVED → VERIFIED
status-firefox102: fixed → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: