REOPENED 182520
transform-style: preserve-3d 
https://bugs.webkit.org/show_bug.cgi?id=182520
Summary transform-style: preserve-3d
Jakub R Pawlowski
Reported 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.
Attachments
Add attachment proposed patch, testcase, etc.
Nils Bergmann
Comment 1 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?
Nils Bergmann
Comment 2 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.
Simon Fraser (smfr)
Comment 3 2023-05-10 13:34:30 PDT
Possibly fixed in recent OS builds.
Matt Woodrow
Comment 4 2023-05-10 14:08:16 PDT
Both example test cases seem to work fine now!
Jakub R Pawlowski
Comment 5 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.
Note You need to log in before you can comment on or make changes to this bug.