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.
Please see also Bug ID: 71624.
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?
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.