CODEWITHSUNDEEP
htmlcssgoogle-chromecss-transforms
Chris Ebert
Chris Ebert

Reputation: 137

CSS transform does not work properly in Chrome

I have rewritten a book page flip animation based on Codrops to a more lightweight version with less JavaScript. My animation runs as desired in Firefox (and Safari), but not in Chrome.

Clicking on the right half of the image for the next picture, Chrome does not show the picture on the flipping side. For demonstration purposes, I set background: red and created the div.helper-class-to-make-bug-visbile to make background: red visible. It only occurs the first time the picture flips. When I go back and flip again the animation is not lagging anymore. This is annoying, even the animation only lags on the first turn.

Demo: https://codepen.io/pizzabote/pen/xxxXmXN

How to fix this so the animation from the demo works in Chrome properly too (flipping the image the first time without lagging)? Or is this a bug in Chrome?

I'm using Chrome version 78.0.3904.87 (Official Build) (64-bit) on macOS Mojave. On Windows, the animation with this Chrome version does not work for me either.

HTML part:

<div class="container">
    <div class="page" id="first">
        <div class="back">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="second">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/1.jpg">
                </div>
            </div>
        </div>
        <div class="back" id="third">
            <div class="outer">
                <div class="content">
                    <div class="helper-class-to-make-bug-visbile">
                        <img src="img/2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="fourth">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="img/2.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

CSS part:

.container {
    width: 400px;
    height: 300px;
    position: relative;

    z-index: 100;
    -webkit-perspective: 1300px;
    perspective: 1300px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;

    width: 50%;
    height: 100%;
    left: 50%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

#first,
#first .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#first {
    z-index: 102;
}
#second {
    z-index: 103;
    transition: transform 0.8s ease-in-out;
}
#third .content {
    width: 400px;
}
#fourth {
    z-index: 101;
}

.page > div,
.outer,
.content,
.helper-class-to-make-bug-visbile {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page > div {
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.outer {
    width: 100%;
    overflow: hidden;
    z-index: 999;
}

/* problematic class: `.content` */
.content {
    width: 200%;
    background: red;
}


.front .content {
    left: -100%;
}

Upvotes: 8

Views: 2685

Answers (1)

Bobbbay
Bobbbay

Reputation: 335

So what's happening?

Backface Visibility

This is happening because you have backface-visibility in .page > div, .outer, .content, .helper-class-to-make-bug-visbile set to hidden. A simple set to visible will fix it.

Here is the functioning code:

let prev = document.getElementById("prev");
let next = document.getElementById("next");

prev.addEventListener("click", prevImg);
next.addEventListener("click", nextImg);


let second = document.getElementById('second');

function prevImg() {
    second.style.msTransform = "rotateY(0deg)";
    second.style.webkitTransform = "rotateY(0deg)";
    second.style.transform = "rotateY(0deg)";
}
function nextImg() {
    second.style.msTransform = "rotateY(-180deg)";
    second.style.webkitTransform = "rotateY(-180deg)";
    second.style.transform = "rotateY(-180deg)";
}
body {
    margin: 4em;
}

.container {
    width: 400px;
    height: 300px;
    position: relative;

    z-index: 100;
    -webkit-perspective: 1300px;
    perspective: 1300px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;

    width: 50%;
    height: 100%;
    left: 50%;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

#first,
#first .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#first {
    z-index: 102;
}
#second {
    z-index: 103;
    transition: transform 0.8s ease-in-out;
}
#third .content {
    width: 400px;
}
#fourth {
    z-index: 101;
}

.page > div,
.outer,
.content,
.helper-class-to-make-bug-visbile {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.page > div {
    width: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.outer {
    width: 100%;
    overflow: hidden;
    z-index: 999;
}

/* problematic class: `.content` */
.content {
    width: 200%;
    background: red;
}


.front .content {
    left: -100%;
}



/* controls */
#prev, #next {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 999;
}
#prev:hover, #next:hover {
    background: rgba(0,0,0,0.05);
    cursor: pointer;
}
#prev {
    top: 0;
    left: 0;
}
#next {
    top: 0;
    left: 50%;
}
<div class="container">
    <div class="page" id="first">
        <div class="back">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="second">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/1.jpg">
                </div>
            </div>
        </div>
        <div class="back" id="third">
            <div class="outer">
                <div class="content">
                    <div class="helper-class-to-make-bug-visbile">
                        <img src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="fourth">
        <div class="front">
            <div class="outer">
                <div class="content">
                    <img src="https://tympanus.net/Development/BookBlock/images/demo1/2.jpg">
                </div>
            </div>
        </div>
    </div>

    <div id="prev"></div>
    <div id="next"></div>
</div>

Run that snippet to see the problem erased from the face of the Universe!

Upvotes: 2

Related Questions