Prevent elements clipping when using 3D CSS transforms

Question

I am having trouble preventing two elements clipping when using 3D CSS transforms. Has anyone come across this before and found a solution?

I have attached a screenshot from the latest version of iOS to illustrate the issue - It also occurs on the desktop version of Safari, but not Chrome on OS X.

I understand why this happens, and even that this is the correct behaviour in some circumstances, but it is inconsistent across different browsers.

Thanks for any help :)

Answer 1

This is caused by rendering both elements within the same 3d layer. The solution is to render them each in their own layer.

This is a simplified version of the code which caused the issue:

CSS:

.wrapper {
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML:

<div class="wrapper">
    <div class="rotate">
        <div class="clipped-element"></div>
    </div>
</div>

By using transform-style and perspective I've created a rendering layer. As the .clipped-element is part of this layer it exists in the same 3d space.

By moving the clipped element into it's own layer it exists in it's own 3d space and the clipping issue is avoided.

CSS:

.wrapper {
    width: 200px;
    height: 200px;
}

.rotate__wrapper {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1000;
}

.rotate {
    width: 100px;
    height: 100px;
    background: grey;
    transform: rotateX(45deg);
}

.clipped-element {
    width: 30px;
    height: 30px;
    background: blue;
}

HTML:

<div class="wrapper">
    <div class="rotate__wrapper">
        <div class="rotate"></div>
    </div>
    <div class="clipped-element"></div>
</div>

I've created an example on CodePen.