CSS transform does not work properly in Chrome - html

Question

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%;
}

Answer 1

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!