Bug 182520 - transform-style: preserve-3d
Summary: transform-style: preserve-3d
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Major
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-02-05 17:11 PST by Jakub R Pawlowski
Modified: 2019-06-16 02:29 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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.