Søg i 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?

  • 2 svar
  • 1 har dette problem
  • 15 visninger
  • Seneste svar af 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?

Ændret af cor-el den

Alle svar (2)

more options

I don't do coding but is that a CSS code?

Nyttig?

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.

Nyttig?

Stil et spørgsmål

Du skal logge ind på din konto for at svare på et indlæg. Start et nyt spørgsmål, hvis du ikke har en konto endnu.