Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why my code work fine on chrome but not firefox?

  • 1 reply
  • 1 has this problem
  • 1 view
  • Last reply by cor-el

more options

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?

Modified by cor-el

All Replies (1)

more options

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.