Bug 249583 – [GTK][WPE][Compositing] Dynamically drawn HTML elements are not correctly composed when css-transformed with the EGL renderer

• Status: NEW
• Component: WebKitGTK

[Loïc Le Page]

Created attachment 464103 [details]
Examples of HTML pages showing the bug effects

When displaying an HTML page with dynamically drawn elements (like a WebGL canvas or a video) that are transformed with CSS, some elements are not correctly drawn by the compositor.

This issue happens with the following components and systems:
- WebKitGTK on Wayland desktop with NVidia or Intel cards
- WPE MiniBrowser on desktop with NVidia card (Intel not tested by it would be likely the same as for WebKitGTK)
- wpe-android with the Android emulator and on real phone devices

The issue is systematic, it happens 100% of the time.

At the contrary everything works well and as expected on WebKitGTK on X11 desktop with NVidia card (Intel not tested).

The attached zip file contains 3 web pages presenting the same 3D carousel created using CSS 3D transforms.
The transformed HTML elements are images for the `carousel_images.html` file, videos for the `carousel_video.html` file and WebGL canvas for the `carousel_webgl.html` file.

In all cases the file with static images elements renders correctly. We can see the images all around the carousel facing in the right direction.
For videos and WebGL canvas, some of the elements are not showing at all on EGL based execution of WebKitGTK (or WPE), but are rendering correctly on the non-EGL execution of WebKitGTK.

Thus, everything seems pointing towards an issue with the EGL renderer as it seems to be the common thing to all failling platforms.

The issue can be tested on the same X11 session using a Weston instance. When running the same WebKitGTK executable within an opened Weston window, we can see the buggy transparent elements while running the same executable on the X11 desktop everything renders correctly.

[Mario Sanchez Prada]

Created attachment 464104 [details]
Bug happening on an Intel GPU with X11 and GLX

[Mario Sanchez Prada]

(In reply to Loïc Le Page from comment #0)
> [...]
> This issue happens with the following components and systems:
> - WebKitGTK on Wayland desktop with NVidia or Intel cards
> - WPE MiniBrowser on desktop with NVidia card (Intel not tested by it would
> be likely the same as for WebKitGTK)
> - wpe-android with the Android emulator and on real phone devices
> 
> The issue is systematic, it happens 100% of the time.
> 
> At the contrary everything works well and as expected on WebKitGTK on X11
> desktop with NVidia card (Intel not tested).

Thanks Loïc for the report! For what it's worth I run a quick test on my laptop with the following configuration and I **also reproduced the issue**:
  - Intel® Iris® Xe Graphics GPU (integrated in Intel Core i7120P)
  - GNOME Shell session on X11 (on Fedora 37 workstation)
  - Epiphany browser 43.0 (based on 2.38.2), using GLX

In such configuration, and even though Epiphany 43.0 uses GLX on a X11 session (something I double checked with strace -f anyway), I can reproduce the problem both with the videos and the webgl demos 100% of the time, so this might not be 

> [...]
> Thus, everything seems pointing towards an issue with the EGL renderer as it
> seems to be the common thing to all failling platforms.

As my quick test shows, this might be not related to EGL after all, since I can reproduce the problem on WebKitGTK 2.38.2 on a X11 session when using GLX instead of EGL, which is something that worked well for you on your NVIDIA card.

I've recorded a short video on https://bugs.webkit.org/attachment.cgi?id=464104 to showcase the issue, hopefully this will help getting this annoying bug fixed alongside the great test cases bug report provided by Loïc already.

PS: I've tested this on Firefox 107.0.1 and Chrome 108.0.5359.98 and works well there

[Loïc Le Page]

In my case, all tests have also been done with the last stable version of WebKitGTK: 2.38.2

[Loïc Le Page]

Also tested on the main branch of WebKit (af67e80850c1e752b05548a41f4d507272c8e7bf) built with those parameters:

cmake -S. -Bbuildgtk -GNinja -DPORT=GTK -DENABLE_ACCESSIBILITY=OFF -DENABLE_BUBBLEWRAP_SANDBOX=OFF -DENABLE_DOCUMENTATION=OFF -DENABLE_GAMEPAD=OFF -DENABLE_INTROSPECTION=OFF -DENABLE_JOURNALD_LOG=OFF -DENABLE_OFFSCREEN_CANVAS=ON -DENABLE_OFFSCREEN_CANVAS_IN_WORKERS=ON -DENABLE_PDFJS=OFF -DENABLE_WEBDRIVER=OFF -DUSE_SOUP2=ON -DUSE_AVIF=OFF

The visual issue is the same as 2.38.2 with slight variations:
- now it is also failling with the X11 configuration
- on the videos example, we can only see background videos like before but the playing is more stable (no more flickering of the video plane faces)
- the webgl example is now crashing when used with Weston over X11

[Lauro Moura]

Created attachment 464860 [details]
Test case with animated text and different layout

The issue seems to affect not only webgl and video but also animated plain elements.

Attached is an example adapted from Loic's carousel tests that shows a similar behavior for an animated div with plain text, placed inside the transformed figure, like the other cases.

The test also shows that the issue seems to manifest by clipping pixels on the positive Z-axis. The same behavior happening for video and WebGL elements.

[Jani Hautakangas]

Duplicate of https://bugs.webkit.org/show_bug.cgi?id=281079 being addressed by https://github.com/WebKit/WebKit/pull/34862