Bug 182520
| Summary: | transform-style: preserve-3d | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jakub R Pawlowski <jakub.r.pawlowski> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | REOPENED | ||
| Severity: | Major | CC: | 709922234, ahmad.saleem792, 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 | ||
Jakub R Pawlowski
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
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
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)
Possibly fixed in recent OS builds.
Matt Woodrow
Both example test cases seem to work fine now!
Jakub R Pawlowski
I just tested on Safari on iOS 16.4.1(a) iPhone XR and it's still broken for me.
Ahmad Saleem
(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?