Bug 255328

Summary:

[TextureMapper][GTK][WPE] CSS 3D animations/transforms are glitchy in some cases

Product:

WebKit

Reporter:

Adrian Perez <aperez>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

alex, dino, graouts, Hironori.Fujii, magomez, zdobersek, zimmermann

Priority:

Version:

WebKit Nightly Build

Hardware:

Other

OS:

Linux

See Also:

https://github.com/Igalia/cog/issues/547

Attachments:

Description	Flags
Screenshot, side by side comparison with Chromium	none
Patch to disable depth buffers	none

Description Adrian Perez 2023-04-12 01:49:34 PDT

Created attachment 465864 [details]
Screenshot, side by side comparison with Chromium

The following page has an animation of the solar system that uses CSS 3D
transforms and animation:

  https://clixplatform.tiss.edu/softwares/Tools/Solar_System_Animation/en/

The WPE and GTK ports show some of the elements glitching, with some of their
parts missing (transparent, mostyl visible on planets) and opacity missing or
wrongly applied (mostly noticeable on the text label for Earth as it circles
around the sun).

Comment 1 Adrian Perez 2023-04-12 01:54:49 PDT

This is reproducible on main (tested 262864@main), both with the WPE
and GTK ports; the GTK4 MiniBrowser is shown in the attached screenshot.

Comment 2 Fujii Hironori 2023-04-12 14:00:02 PDT

Created attachment 465871 [details]
Patch to disable depth buffers

This is a side effect of enabling depth buffers prematurely by 229846@main.
You can check how it looked like by disabling depth buffers.
The fundamental problems are tracked by:

  Bug 217103 – [TextureMapper] A semi-transparent parent layer is rendered as a opaque layer for children layers
  Bug 217080 – [TextureMapper] Order Independent Transparency support

I'm a bit busy now. I'd be grad to review if someone proposes patches for them.