Open Bug 1717863 Opened 5 years ago Updated 2 years ago

Black box rendered when animating opacity

Categories

(Core :: Graphics: WebRender, defect)

Product:
Core
Component:
Graphics: WebRender
Version:
Firefox 89
Platform:
Unspecified
All
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: cleriotsimon, Unassigned)

References

(Blocks 2 open bugs)

Details

Attachments

(2 files)

testcase.html
1.16 KB, text/html
Details
OK
10.92 KB, text/plain
Details

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Steps to reproduce:

On Geckoview 89 when I animate opacity on a div, I get a black box during animation
This issue was not happening on Geckoview 88

Same issue happens also on Firefox Android 89

The device runs Android 8.1

Here is a simple webpage with the issue happening

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <!-- Enable IE Standards mode -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>
    <meta name="description" content="">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            -ms-content-zooming: none;
        }

        .default {
            position: absolute;
            width: 23%;
            height: 25%;
            top: 30%!important;
            left: 1%!important;

            opacity: 0;
            transition: opacity .5s ease-out;
        }

        .animate {
            opacity: 1;
        }
    </style>
</head>

<body>

    <div id="popup"></div>

    <div class="default" id="animation">
        This text has opacity animated
    </div>

    <script>
        setTimeout(() => {
            document.getElementById('animation').classList.add("animate")
        }, 1000);
    </script>

</body>

</html>

Actual results:

Geckoview 89 shows a black box when rendering opacity animation

Expected results:

Animations should not have rendering issues

Are you able to reproduce this on Geckoview Example? If so then running Mozregression either GUI or CLI is fine. With the gve flag would be useful.

Component: General → Graphics
Product: GeckoView → Core

I was able to reproduce on Geckoview Example + I ran Mozregression.

Here is the corresponding changelog between good and bad revisions: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=b79bcdd75afa6f8739c162e2873c6f8cd0708092&tochange=00d6baae64871a5cca9c86e55b3607a821b468e0

My device has a PowerVR GPU (PowerVR SGX6110) and I see there is a changelog related to webrender and PowerVR: https://hg.mozilla.org/integration/autoland/rev/3c2c9b13b8c2cd30a05a46e80fc13e947b5bd90e (https://bugzilla.mozilla.org/show_bug.cgi?id=1704818)

Component: Graphics → Graphics: WebRender

:jnical, can you comment to the bug?

Flags: needinfo?(jnicol)
Attached file testcase.html —

Adding as attachment so I can easily run from device

I cannot reproduce on my Galaxy A10s (PowerVR Rogue GE8320) running Android 10.

Could you please go to about:support on your device, click "Copy text to clipboard", and attach the text to this bug? Thanks

Could you also try running mozregression from much further back (ie the good build as 2021-06-25) with the --pref 'gfx.webrender.all:true'. This will force webrender to be enabled and find out if it regressed prior to webrender being enabled on your device. It might turn out to always have been broken, but it's worth a try.

Flags: needinfo?(jnicol) → needinfo?(cleriotsimon)

Sorry, I meant 2020-06-25, ie a year ago

Attached file OK —
Here is the about:support text: ```

Please find below the about:support text

I've also tried mozregression --good 2020-06-25 --app gve and no issue and if I run mozregression --good 2020-06-25 --app gve --pref 'gfx.webrender.all:true' I've got the issue

Broadcasting: Intent { flg=0x400000 cmp=ch.pete.adbclipboard/.ReadReceiver }
Broadcast completed: result=-1, data="Application Basics
------------------

Name: GeckoView Example
Version: 89.0a1
Build ID: 20210414192710
Distribution ID:
User Agent: Mozilla/5.0 (Android 8.1.0; Mobile; rv:89.0) Gecko/89.0 Firefox/89.0
OS: Linux 27 #226 SMP PREEMPT Tue Mar 16 10:15:52 CST 2021
Multiprocess Windows: 0/0
Fission Windows: 0/0 Disabled by default
Remote Processes: 1
Google Location Service Key: Found
Google Safebrowsing Key: Found
Mozilla Location Service Key: Found
Safe Mode: false

Crash Reports for the Last 3 Days
---------------------------------

Nightly Features
----------------

Remote Processes
----------------

Type: Web Content
Count: 1 / 2

Add-ons
-------

Graphics
--------

Features
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_KHR_get_all_proc_addresses EGL_ANDROID_presentation_time EGL_KHR_swap_buffers_with_damage EGL_ANDROID_get_native_client_buffer EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps 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_fence_sync EGL_KHR_create_context EGL_KHR_surfaceless_context EGL_EXT_create_context_robustness EGL_ANDROID_image_native_buffer EGL_KHR_wait_sync EGL_ANDROID_recordable EGL_KHR_partial_update EGL_EXT_buffer_age EGL_KHR_mutable_render_buffer EGL_IMG_context_priority IsWebglOutOfProcessEnabled: 0
WebGL 1 Driver Renderer: Imagination Technologies -- PowerVR Rogue G6110
WebGL 1 Driver Version: OpenGL ES 3.1 build 1.8@4634722 (1.8.RTM)
WebGL 1 Driver Extensions: GL_EXT_debug_marker GL_EXT_blend_minmax GL_EXT_buffer_storage GL_EXT_clear_texture GL_EXT_color_buffer_float GL_EXT_conservative_depth GL_EXT_copy_image GL_EXT_discard_framebuffer GL_EXT_draw_buffers GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_gpu_shader5 GL_EXT_multi_draw_arrays GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_polygon_offset_clamp GL_EXT_pvrtc_sRGB GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_separate_shader_objects GL_EXT_shader_framebuffer_fetch GL_EXT_shader_group_vote GL_EXT_shader_io_blocks GL_EXT_shader_non_constant_global_initializers GL_EXT_shader_pixel_local_storage GL_EXT_shader_pixel_local_storage2 GL_EXT_shader_texture_lod GL_EXT_shadow_samplers GL_EXT_sparse_texture GL_EXT_texture_border_clamp GL_EXT_texture_buffer GL_EXT_texture_cube_map_array GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_sRGB_decode GL_EXT_texture_sRGB_R8 GL_EXT_texture_sRGB_RG8 GL_EXT_YUV_target GL_IMG_bindless_texture GL_IMG_framebuffer_downsample GL_IMG_multisampled_render_to_texture GL_IMG_program_binary GL_IMG_read_format GL_IMG_shader_binary GL_IMG_texture_compression_pvrtc GL_IMG_texture_compression_pvrtc2 GL_IMG_texture_format_BGRA8888 GL_IMG_texture_npot GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_KHR_debug GL_KHR_robustness GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_depth_texture GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_EGL_sync GL_OES_element_index_uint GL_OES_fragment_precision_high GL_OES_get_program_binary GL_OES_gpu_shader5 GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_required_internalformat GL_OES_rgb8_rgba8 GL_OES_sample_shading GL_OES_sample_variables GL_OES_shader_image_atomic GL_OES_shader_io_blocks GL_OES_shader_multisample_interpolation GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_buffer GL_OES_texture_cube_map_array GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_OES_vertex_array_object GL_OES_vertex_half_float
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_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_pvrtc 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_KHR_get_all_proc_addresses EGL_ANDROID_presentation_time EGL_KHR_swap_buffers_with_damage EGL_ANDROID_get_native_client_buffer EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps 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_fence_sync EGL_KHR_create_context EGL_KHR_surfaceless_context EGL_EXT_create_context_robustness EGL_ANDROID_image_native_buffer EGL_KHR_wait_sync EGL_ANDROID_recordable EGL_KHR_partial_update EGL_EXT_buffer_age EGL_KHR_mutable_render_buffer EGL_IMG_context_priority IsWebglOutOfProcessEnabled: 0
WebGL 2 Driver Renderer: Imagination Technologies -- PowerVR Rogue G6110
WebGL 2 Driver Version: OpenGL ES 3.1 build 1.8@4634722 (1.8.RTM)
WebGL 2 Driver Extensions: GL_EXT_debug_marker GL_EXT_blend_minmax GL_EXT_buffer_storage GL_EXT_clear_texture GL_EXT_color_buffer_float GL_EXT_conservative_depth GL_EXT_copy_image GL_EXT_discard_framebuffer GL_EXT_draw_buffers GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_gpu_shader5 GL_EXT_multi_draw_arrays GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_polygon_offset_clamp GL_EXT_pvrtc_sRGB GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_separate_shader_objects GL_EXT_shader_framebuffer_fetch GL_EXT_shader_group_vote GL_EXT_shader_io_blocks GL_EXT_shader_non_constant_global_initializers GL_EXT_shader_pixel_local_storage GL_EXT_shader_pixel_local_storage2 GL_EXT_shader_texture_lod GL_EXT_shadow_samplers GL_EXT_sparse_texture GL_EXT_texture_border_clamp GL_EXT_texture_buffer GL_EXT_texture_cube_map_array GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_sRGB_decode GL_EXT_texture_sRGB_R8 GL_EXT_texture_sRGB_RG8 GL_EXT_YUV_target GL_IMG_bindless_texture GL_IMG_framebuffer_downsample GL_IMG_multisampled_render_to_texture GL_IMG_program_binary GL_IMG_read_format GL_IMG_shader_binary GL_IMG_texture_compression_pvrtc GL_IMG_texture_compression_pvrtc2 GL_IMG_texture_format_BGRA8888 GL_IMG_texture_npot GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_KHR_debug GL_KHR_robustness GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_depth_texture GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_EGL_sync GL_OES_element_index_uint GL_OES_fragment_precision_high GL_OES_get_program_binary GL_OES_gpu_shader5 GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_required_internalformat GL_OES_rgb8_rgba8 GL_OES_sample_shading GL_OES_sample_variables GL_OES_shader_image_atomic GL_OES_shader_io_blocks GL_OES_shader_multisample_interpolation GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_buffer GL_OES_texture_cube_map_array GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_OES_vertex_array_object GL_OES_vertex_half_float
WebGL 2 Extensions: EXT_color_buffer_float EXT_float_blend EXT_texture_filter_anisotropic MOZ_debug WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_pvrtc WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Uses Tiling: true
Uses Tiling (Content): true
Target Frame Rate: 60
GPU #1
Active: Yes
Description: Model: NS02V2_Series8, Product: NS02V2_Series8, Manufacturer: Shuttle, Hardware: rk30board, OpenGL: Imagination Technologies -- PowerVR Rogue G6110 -- OpenGL ES 3.1 build 1.8@4634722 (1.8.RTM)
Vendor ID: Imagination Technologies
Device ID: PowerVR Rogue G6110
Driver Version: OpenGL ES 3.1 build 1.8@4634722 (1.8.RTM)
RAM: 0

Diagnostics
AzureCanvasBackend: skia
AzureContentBackend: skia
AzureFallbackCanvasBackend: none
CMSOutputProfile: Empty profile data
Display0: 1920x1080
DisplayCount: 1
TileHeight: 512
TileWidth: 512
Device Reset: Trigger Device Reset
Decision Log
HW_COMPOSITING:
available by default
force_enabled by user: Force-enabled by pref
OPENGL_COMPOSITING:
available by default
force_enabled by user: Force-enabled by pref
WEBRENDER:
available by default
WEBRENDER_QUALIFIED:
available by default
WEBRENDER_COMPOSITOR:
disabled by default: Disabled by default
WEBRENDER_PARTIAL:
available by default
WEBRENDER_SHADER_CACHE:
available by default
WEBRENDER_OPTIMIZED_SHADERS:
available by default
WEBRENDER_ANGLE:
available by default
unavailable by env: OS not supported
WEBRENDER_DCOMP_PRESENT:
available by default
disabled by user: User disabled via pref
unavailable by env: Requires Windows 10 or later
unavailable by runtime: Requires ANGLE
WEBRENDER_SOFTWARE:
available by default
blocklisted by env: No qualified hardware
OMTP:
disabled by default: Disabled by default
broken by runtime: OMTP is not supported with < 2 GB RAM
WEBGPU:
disabled by default: Disabled by default




Media
-----

Audio Backend: opensl
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:
Media Capabilities
Enumerate database

Environment Variables
---------------------

Important Modified Preferences
------------------------------

extensions.lastAppVersion: 89.0a1
media.gmp.storage.version.observed: 1
network.trr.blocklist_cleanup_done: true

Important Locked Preferences
----------------------------

fission.autostart.session: false

Accessibility
-------------

Activated: false
Prevent Accessibility: 0

Library Versions
----------------

NSPR
Expected minimum version: 4.30
Version in use: 4.30

NSS
Expected minimum version: 3.63
Version in use: 3.63

NSSSMIME
Expected minimum version: 3.63
Version in use: 3.63

NSSSSL
Expected minimum version: 3.63
Version in use: 3.63

NSSUTIL
Expected minimum version: 3.63
Version in use: 3.63

Startup Cache
-------------

Disk Cache Path: /data/user/0/org.mozilla.geckoview_example/files/mozilla/7lign2r2.default/startupCache/startupCache.4.little
Ignore Disk Cache: false
Found Disk Cache on Init: false
Wrote to Disk Cache: false

Internationalization & Localization
-----------------------------------

Application Settings
Requested Locales: ["fr-FR"]
Available Locales: ["en-US"]
App Locales: ["en-US"]
Regional Preferences: ["en-US"]
Default Locale: "en-US"
Operating System
System Locales: ["fr-FR"]
Regional Preferences: ["fr-FR"]
Flags: needinfo?(cleriotsimon)

Okay, thanks. It looks like this is a long-standing issue with webrender on this device then. Is it only text that is drawn as a black box? What happens if you animate the opacity for other types of element?

Hiro, are you able to comment on what effect animating the opacity might have, in terms of the display list given to webrender? Glenn, do you know how that could affect how we render text?

Flags: needinfo?(hikezoe.birchill)
Flags: needinfo?(gwatson)
Flags: needinfo?(cleriotsimon)

The differences that come to mind are:

  • The text run will be drawn to an off-screen surface rather than directly to picture cache tiles (so the blit of the surface can apply the opacity).
  • The off-screen surface will disable subpixel AA and use grayscale (shouldn't be relevant here, as we disable subpixel AA on mobile globally).
  • Snapping will follow a somewhat different path, since we're drawing an animated surface.
  • It's possible we draw the off-screen surface as a raster root and/or with a different scale (I don't think this will happen in this case though).

None of those seem obvious candidates to cause a problem here, though I guess with a driver bug anything is possible!

Flags: needinfo?(gwatson)

In terms of display items for opacity animation, there is nothing special. We set a unique id to each display item and sample animating values and update on the sampler thread, and use it in scene building.

Flags: needinfo?(hikezoe.birchill)

FTR this no longer affects users because we switched that GPU to software webrender in bug 1742987. Will leave this open however as the bug still affects hardware webrender on this GPU.

Redirect a needinfo that is pending on an inactive user to the triage owner.
:gw, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(cleriotsimon) → needinfo?(gwatson)
Flags: needinfo?(gwatson)
Severity: -- → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: