Closed Bug 1458223 Opened 2 years ago Closed 2 years ago

Flickering of semi-transparent header bar when scrolling an article on The Verge

Categories

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

defect

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: RyanVM, Unassigned)

References

()

Details

(Keywords: regression)

I noticed some really ugly flickering today while reading the article linked from the URL field. I confirmed that it only reproduces with WebRender enabled. To reproduce, scroll the page down far enough to get the header across the top of the screen, then scroll around a bit. Seems to reproduce more easily when I get about halfway down the page past the ads on the side. I can also reproduce it just by hovering links with the mouse.

INFO: Last good revision: bf5816cd4b5e3b7a0b5f45bc69fb03ee3cfb7c1f
INFO: First bad revision: 69de9f5b90681b6e789c982bb52e5d1041c00383
INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=bf5816cd4b5e3b7a0b5f45bc69fb03ee3cfb7c1f&tochange=69de9f5b90681b6e789c982bb52e5d1041c00383

Regression from bug 1447286 it appears.

My about:support Graphics section is below:

Features
Compositing: WebRender
Asynchronous Pan/Zoom: wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled
WebGL 1 Driver WSI Info: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000b869) EGL_VERSION: 1.4 (ANGLE 2.1.0.fcbca0e873c3) 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_EXT_device_query 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_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
WebGL 1 Driver Renderer: Google Inc. -- ANGLE (NVIDIA Quadro M1000M Direct3D11 vs_5_0 ps_5_0)
WebGL 1 Driver Version: OpenGL ES 2.0 (ANGLE 2.1.0.fcbca0e873c3)
WebGL 1 Driver Extensions: GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory 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_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range 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_dxt1 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_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_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint 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_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint 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. (adapter LUID: 000000000000b869) EGL_VERSION: 1.4 (ANGLE 2.1.0.fcbca0e873c3) 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_EXT_device_query 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_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses
WebGL 2 Driver Renderer: Google Inc. -- ANGLE (NVIDIA Quadro M1000M Direct3D11 vs_5_0 ps_5_0)
WebGL 2 Driver Version: OpenGL ES 3.0 (ANGLE 2.1.0.fcbca0e873c3)
WebGL 2 Driver Extensions: GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_multiview GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory 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_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range 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_dxt1 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_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_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint 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_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
WebGL 2 Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Direct2D: true
Off Main Thread Painting Enabled: true
DirectWrite: true (10.0.17134.1)
GPU #1
Active: Yes
Description: NVIDIA Quadro M1000M
Vendor ID: 0x10de
Device ID: 0x13b1
Driver Version: 24.21.13.9731
Driver Date: 4-22-2018
Drivers: C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumdx.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumdx.dll C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumd.dll,C:\WINDOWS\System32\DriverStore\FileRepository\nvdmwi.inf_amd64_6930aa9bdc6d47f8\nvldumd.dll
Subsys ID: 06d91028
RAM: 2048
GPU #2
Active: No
Description: Intel(R) HD Graphics P530
Vendor ID: 0x8086
Device ID: 0x191d
Driver Version: 23.20.16.5018
Driver Date: 3-27-2018
Drivers: igdumdim64 igd10iumd64 igd10iumd64 igd12umd64 igdumdim32 igd10iumd32 igd10iumd32 igd12umd32
Subsys ID: 0000000c
RAM: Unknown
Diagnostics
AzureCanvasAccelerated: 0
AzureCanvasBackend: direct2d 1.1
AzureCanvasBackend (UI Process): skia
AzureContentBackend: skia
AzureContentBackend (UI Process): skia
AzureFallbackCanvasBackend (UI Process): cairo
GPUProcessPid: 916
GPUProcess: Terminate GPU Process
Device Reset: Trigger Device Reset
failures: GP+[GFX1-]: WR: Unknown pipeline used for iframe IframeDisplayItem { clip_id: Clip(4, PipelineId(1, 1)), pipeline_id: PipelineId(1, 2) }
Decision Log
WEBRENDER:
opt-in by default: WebRender is an opt-in feature
available by user: Enabled by pref

AFAICT, those "Unknown pipeline used for iframe" failures aren't relevant to this failure (neither the before nor the after builds on autoland show it when this first started to reproduce).
Flags: needinfo?(bugmail)
Priority: -- → P1
I'm not able to reproduce this on either macOS or Windows :( Is the whole page flickering, or just the header part?
Flags: needinfo?(bugmail)
Just the header.
RyanVM showed me this over Vidyo. Normally when scrolling the page, the text that is "under" the header bar is visible with partial opacity. However, with the bug, the text flickers between normal (partial opacity) and appearing at 1.0 opacity. The "The Verge" text in the top-left corner of the header bar is unaffected, though. The flickering also seems to stop if there is an image or ad under the header bar.

The WR regression range is this:

*   30cfecc3 Auto merge of #2558 - sotaroikeda:fix-texutre-rect, r=glennw
|\
| * 81231281 Fix TEXTURE_RECT vUvClipBounds value
|/
*   7767f53a Auto merge of #2554 - glennw:reftest-clear, r=jrmuizel
|\
| * 0158dc0b Clear the texture cache (and resource cache) before running each reftest in wrench.
* |   91968ed4 Auto merge of #2555 - glennw:opt-in-mips, r=jrmuizel
|\ \
| |/
|/|
| * 8739fcc3 Make automatic mipmap generation opt-in.
* |   d3f00c05 Auto merge of #2482 - servo:debug, r=glennw
|\ \
| * | e813cc8a Remove no-op "debug" config.
|  /
* |   b9543836 Auto merge of #2540 - glennw:text-shadow-screen2, r=mrobinson
|\ \
| |/
|/|
| * 1d65037a Draw text shadows in screen space.
*   9c994b0c Auto merge of #2550 - staktrace:rb_create, r=glennw
|\
| * 12370f8a Add a callback for RB thread creation.
*   dfd151b5 Auto merge of #2548 - mrobinson:remove-complex-radial-gradient-support, r=glennw
|\
| * e3798c49 Remove complex radial gradient API
* 941dc181 Auto merge of #2547 - staktrace:bincode, r=glennw
* ceac6c84 update bincode to 1.0
* 2207b89c Sort list of duplicated packages

Of these, the ones that actually seem to touch WR functionality are servo/webrender#2540 and servo/webrender#2558, so those are the most likely culprits IMO. Glenn, any ideas on what might cause this? It might be hardware- or driver-specific.
Flags: needinfo?(gwatson)
Nothing obvious I can think of. https://github.com/servo/webrender/issues/2540 seems most likely, although I haven't been able to reproduce locally thus far.
Flags: needinfo?(gwatson)
Ryan, do you still see this?
Flags: needinfo?(ryanvm)
I can't reproduce this on the reference hardware. I'm going to demote it from being a P1
Priority: P1 → P2
Yes, it seems to be OK now. I tried to bisect a fix with mozregression, but that ended up being a lot harder than I thought it would be because some time around early June, it went from really bad flickering to much more infrequent flickering, so identifying good or bad builds has gotten much more difficult. That said, I can't get it to reproduce at all with current Nightlies, so meh :)
Status: NEW → RESOLVED
Closed: 2 years ago
Flags: needinfo?(ryanvm)
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.