Bug 182520

Summary: transform-style: preserve-3d
Product: WebKit Reporter: Jakub R Pawlowski <jakub.r.pawlowski>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: REOPENED ---    
Severity: Major CC: bfulgham, dino, graouts, mattwoodrow, nilsbergmann, sabouhallawa, simon.fraser, zalan
Priority: P2    
Version: Safari 11   
Hardware: iPhone / iPad   
OS: iOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=71624

Description Jakub R Pawlowski 2018-02-05 17:11:23 PST
As described and documented with screenshots and jsbin code in my stackoverflow question there is a problem with how transform-style: preserve-3d works. Divs are render incorrectly.

https://stackoverflow.com/questions/48616695/css3d-overlapping-divs-on-mobile-safari

Please see also Bug ID: 71624.
Comment 1 Nils Bergmann 2019-06-11 09:49:53 PDT
Ok, now I run into the same problem. A Bug known for nearly 8 Years is pretty hardcore. 

Here is my stackoverflow post: https://stackoverflow.com/questions/56314779/workaround-for-webkit-overlapping-glitch

Did anybody find a workaround?
Comment 2 Nils Bergmann 2019-06-16 02:29:53 PDT
I tried to find a workaround for this and after some days I finally had an idea. 

I thought, maybe webkit has not the same user z-axe perspective as other browsers. I tried to move the objects more far away. And yes, this is at least for me a solution. 

-webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);

Notice the translateZ. It prevents the layout bug for me.
Comment 3 Simon Fraser (smfr) 2023-05-10 13:34:30 PDT
Possibly fixed in recent OS builds.
Comment 4 Matt Woodrow 2023-05-10 14:08:16 PDT
Both example test cases seem to work fine now!
Comment 5 Jakub R Pawlowski 2023-05-10 16:10:30 PDT
I just tested on Safari on iOS 16.4.1(a) iPhone XR and it's still broken for me.