I am currently working on making a flipping animation on some divs.
However, I have found that it works incorrectly and differently in every browser that I have tried. Only Edge works the way that I want.
I want clicking the "flip" text to flip over in order to show the .flipping-view-back div, and hide the .flipping-view-front div. Additionally, the toolbar with position:fixed on the back div should be fixed at the top of the page even when scrolling.
In reality, this is only working in some browsers.
On Edge: This is working exactly how I want it to. Video
On Chrome: The front div flips over, but there is no back div visible behind it. The back div only pops in once the rotation transition has fully completed. Strangely, scrolling at any time during the flip will also trigger the back div to pop in. Also, scrolling down moves the fixed div out of sight. Video
On iOS Safari: This flips correctly, but scrolling down moves the fixed div out of sight. Video
In all these videos, I clicked on the flip text and waited for the animation to finish. Then I scrolled down.
How can I make the flip animation correct and keep the fixed div at the top in all browsers?
var currView = 0;
const rotatingViewElem = document.querySelector(".main");
const VIEW_FEED = 0;
const VIEW_FLIPPING_SEND = 1;
var viewFeedElem = document.querySelector(".view-positioner.feed");
var viewCreateElem = document.querySelector(".view-positioner.create");
var viewSelectRecipientsElem = document.querySelector(".view-positioner.select-recipients");
var viewFlippingSendElem = document.querySelector(".view-positioner.flipping-send");
var viewsList = [viewFlippingSendElem];
function flipView(isGoForward) {
var flippingElem = viewsList[currView];
var globalRotate;
if (isGoForward) {
globalRotate = "rotateY(180deg)";//flip around
} else {
globalRotate = "rotateY(0deg)";
}
flippingElem.style.transform = globalRotate;
}
document.querySelector(".create-send-button").addEventListener("click", function (e) { flipView(true) })body, html{
width:100%;
height:100%;
margin:0px;
overflow:hidden;
}
.main{
perspective: 2000px;
height:100%;
}
.flipping-view-wrapper{
transform: rotateY(0);
transform-style: preserve-3d;
transition: transform 5.5s;
}
body{
height: 100%;
}
.view{
transform-style: preserve-3d;
position: relative;
padding-top:1px;
overflow-y:auto;
height: calc(100% - 1px);
width:100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.view-positioner{
position: absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.flipping-view-front{
background-color: pink;
transform: rotateY(0deg);
}
.flipping-view-back{
background-color: green;
transform:rotateY(180deg);
}
.create-send-button{
cursor: pointer;
}
/* begin top toolbar */
.top-toolbar{
position:fixed;
top:0px;
left:0px;
width:100%;
height:55px;
background:#FFFB00;
}<!DOCTYPE html>
<html>
<body class="lightblue">
<div class="main">
<div class="view-positioner flipping-send flipping-view-wrapper lightblue ">
<div class="view-positioner view create flipping-view-front">
<div class="create-inputs center">
<div class="create-send-button" style="font-size: 50px;">
flip to the backside this is long so you can see
</div>
</div>
</div>
<div class="view-positioner view select-recipients lightblue flipping-view-back">
<div class="top-toolbar">
fixed
</div>
<div style="width:10px">Long text a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
</div>
</div>
</div>
</body>
</html>
