Why my code work fine on chrome but not firefox?
Here is my code:
<html> <head> <meta charset="utf-8"> <style> .fullCard, .lowerHalfCard, .upperHalfCard, .fullCard-after, .lowerHalfCard-after, .upperHalfCard-after { background-color: inherit; border-radius: 10px; height: 100%; width: 100%; position: absolute; align-items: center; display: flex; justify-content: center; vertical-align:middle; } .fullCard-after::after, .upperHalfCard-after::after{ content: ""; display: block; position: absolute; height: 4px; background-color: inherit; width: 100%; top: calc(50% - 2px); } .lowerHalfCard-after::after{ content: ""; display: block; position: absolute; height: 4px; background-color: inherit; width: 100%; top: calc(50% - 2px); } .lowerHalfCard, .lowerHalfCard-after{ clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%); } .upperHalfCard, .upperHalfCard-after{ clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); } .splitFlap { background-color:black; box-sizing: border-box; border-radius: 10px; width: 100px; height: 150px; position: relative; } .rotate0to90 { animation-name: r0to90; } .rotate90to0 { animation-name: r90to0; } .rotate0to_90 { animation-name: r0to_90; } .rotate_90to0 { animation-name: r_90to0; } .rotate0to90, .rotate90to0, .rotate0to_90, .rotate_90to0 { animation-duration: 0.3s; animation-fill-mode: forwards; } @keyframes r0to90 { from { transform:rotateX(0deg); } to { transform: rotateX(90deg); } } @keyframes r90to0 { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } } @keyframes r0to_90 { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } } @keyframes r_90to0 { from { transform: rotateX(-90deg); } to { transform: rotateX(0deg); } } .transform0to_90 { transform: rotateX(-90deg); } .transform0to90 { transform: rotateX(90deg); } .hide{ display:none } .zIndex2 { z-index: 2; } .zIndex4 { z-index: 4; } .zIndex10 { z-index: 10; } .blue{ background-color: blue } .green{ background-color: green } .red{ background-color: red } .orange{ background-color: orange } </style> <script> let baseDiv,lowerDiv,middleDiv,upperDiv; document.addEventListener("DOMContentLoaded",()=>{ baseDiv=document.getElementById("base"); lowerDiv=document.getElementById("lower"); middleDiv=document.getElementById("middle"); upperDiv=document.getElementById("upper"); }); let backward=()=>{ middleDiv.innerHTML=baseDiv.innerHTML; lowerDiv.classList.add("rotate0to90"); middleDiv.className="upperHalfCard-after transform0to_90 zIndex4"; } let forward=()=>{ middleDiv.innerHTML=baseDiv.innerHTML; upperDiv.classList.add("rotate0to_90"); middleDiv.className="lowerHalfCard-after transform0to90 zIndex4"; } let upperHandler=()=>{ middleDiv.classList.add("rotate90to0"); upperDiv.classList.replace("zIndex4","zIndex2"); } let lowerHandler=()=>{ lowerDiv.classList.replace("zIndex4","zIndex2"); middleDiv.classList.add("rotate_90to0"); } let middleHandler=()=>{ upperDiv.innerHTML=baseDiv.innerHTML; lowerDiv.innerHTML=baseDiv.innerHTML; middleDiv.className="hide"; upperDiv.className="upperHalfCard-after zIndex4"; lowerDiv.className="lowerHalfCard-after zIndex2"; } </script> </head> <body> <div class="splitFlap"> <div id="base" class="fullCard-after zIndex2"> <img src="img/1_100.png"> </div> <div class="upperHalfCard-after zIndex4" id="upper" onAnimationEnd="upperHandler()"> <img src="img/0_100.png"> </div> <div id="middle" class="hide" onAnimationEnd="middleHandler()"> </div> <div class="lowerHalfCard-after zIndex2" id="lower" onAnimationEnd="lowerHandler()"> <img src="img/0_100.png"> </div> </div> <p> <button onClick="forward()"> + </button> <button onClick="backward()"> - </button> <button onClick="setHinge()">Set Hinge</button> </p> </body> </html>
I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
Here is my code:
<pre><nowiki><html>
<head>
<meta charset="utf-8">
<style>
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: center;
display: flex;
justify-content: center;
vertical-align:middle;
}
.fullCard-after::after,
.upperHalfCard-after::after{
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after{
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after{
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after{
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color:black;
box-sizing: border-box;
border-radius: 10px;
width: 100px;
height: 150px;
position: relative;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes r0to90 {
from {
transform:rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
@keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
@keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
@keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide{
display:none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
.zIndex10 {
z-index: 10;
}
.blue{
background-color: blue
}
.green{
background-color: green
}
.red{
background-color: red
}
.orange{
background-color: orange
}
</style>
<script>
let baseDiv,lowerDiv,middleDiv,upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
baseDiv=document.getElementById("base");
lowerDiv=document.getElementById("lower");
middleDiv=document.getElementById("middle");
upperDiv=document.getElementById("upper");
});
let backward=()=>{
middleDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.classList.add("rotate0to90");
middleDiv.className="upperHalfCard-after transform0to_90 zIndex4";
}
let forward=()=>{
middleDiv.innerHTML=baseDiv.innerHTML;
upperDiv.classList.add("rotate0to_90");
middleDiv.className="lowerHalfCard-after transform0to90 zIndex4";
}
let upperHandler=()=>{
middleDiv.classList.add("rotate90to0");
upperDiv.classList.replace("zIndex4","zIndex2");
}
let lowerHandler=()=>{
lowerDiv.classList.replace("zIndex4","zIndex2");
middleDiv.classList.add("rotate_90to0");
}
let middleHandler=()=>{
upperDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className="hide";
upperDiv.className="upperHalfCard-after zIndex4";
lowerDiv.className="lowerHalfCard-after zIndex2";
}
</script>
</head>
<body>
<div class="splitFlap">
<div
id="base"
class="fullCard-after zIndex2">
<img src="img/1_100.png">
</div>
<div
class="upperHalfCard-after zIndex4"
id="upper"
onAnimationEnd="upperHandler()">
<img src="img/0_100.png">
</div>
<div
id="middle"
class="hide"
onAnimationEnd="middleHandler()">
</div>
<div
class="lowerHalfCard-after zIndex2"
id="lower"
onAnimationEnd="lowerHandler()">
<img src="img/0_100.png">
</div>
</div>
<p>
<button onClick="forward()">
+
</button>
<button onClick="backward()">
-
</button>
<button onClick="setHinge()">Set Hinge</button>
</p>
</body>
</html>
</nowiki></pre><br>
I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
Được chỉnh sửa bởi cor-el vào
Tất cả các câu trả lời (1)
You didn't include the img src="img/0_100.png", so it is harder to test.
Try to ask advice at a web development oriented forum.