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.
Ahmad Saleem
Comment 6 2025-04-17 01:28:37 PDT
(In reply to Jakub R Pawlowski from comment #5) > I just tested on Safari on iOS 16.4.1(a) iPhone XR and it's still broken for > me. @Jakub - you mean iOS 18.4.1? or iOS 16?
Note You need to log in before you can comment on or make changes to this bug.