Bug 231028 - CSS transforms are incapable of rendering a simple 3D cube without glitches
Summary: CSS transforms are incapable of rendering a simple 3D cube without glitches
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 14
: P2 Critical
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-30 10:35 PDT by Joe Pea
Modified: 2022-07-08 00:59 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Joe Pea 2021-09-30 10:35:19 PDT
Visit https://lume.io on an iPhone 13 Pro Maxx.

At the time of writing this, the frame rate is not only slow, but the cube (composed of 6 DOM elements with CSS 3D transforms) is glitchy because the sides render on top of each other in the wrong order.

It has been many years (more than a decade) that CSS 3D is considered a low priority feature and neglected, leaving people's attempts at making 3D experiences glitchy and giving end users wrong impressions: LUME is not glitchy, Safari is!

Do you know how serious of on issue there would be in the Unreal Engine and Unity Engine communities if those softwares rendered glitchy cubes at low frame rates? It is just something that would never happen. If it did, you bet it would be fixed immediately.

What about the web? Eh, who cares?
Comment 1 Kevin Neal 2021-09-30 15:44:27 PDT
Thank you for filing. I was able to reproduce the bug using the latest iOS 15 beta and macOS. The appropriate engineers have been notified.
Comment 2 Radar WebKit Bug Importer 2021-09-30 15:44:38 PDT
<rdar://problem/83741550>
Comment 3 Simon Fraser (smfr) 2021-10-04 08:29:05 PDT
This is about how different implementations do depth-sorting of 3d transformed elements.
Comment 4 Joe Pea 2022-07-08 00:59:06 PDT
Sorry, I have more recently updated the cube on https://lume.io to one made with WebGL, so the original problem is not currently visible there.

There are plenty of CSS 3D cube examples available here though:

https://www.google.com/search?q=site%3Acodepen.io+css+3D+cube