Showing questions tagged: Show all questions
  • Archived

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, .l… (read more)

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?

Asked by knvbhk 2 years ago

Last reply by cor-el 2 years ago