It was possible to add: terrible rendering 3D in Firefox. In short, here's the picture:
Chrome smoothes and optimizes, even Edge does the same exorbitant task.
But Firefox fiercely decided to spoil the opinion of himself once again, after a story with a bug of positioned elements in flexs , as well as very poor and non-optimized support for Mutation Observer , now I came across a problem regarding 3D rendering.
There is such a boot: codepen .
Or a snippet, in principle:
.loading { position: relative; height: 98px; width: 68px; box-sizing: border-box; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: loadingRotate 3s ease-in-out 3s infinite; animation: loadingRotate 3s ease-in-out 3s infinite; will-change: transform; } .loading div { border: 1px solid #FF0099; position: absolute; box-sizing: border-box; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } .loading .art1 { width: 20px; height: 40px; top: 0; left: 0; } .loading .art3 { width: 20px; height: 30px; top: 0; left: 24px; } .loading .art2 { width: 20px; height: 20px; top: 0; left: 48px; } .loading .art5 { width: 20px; height: 20px; top: 44px; left: 0; } .loading .art6 { width: 20px; height: 34px; top: 34px; left: 24px; } .loading .art4 { width: 20px; height: 30px; top: 24px; left: 48px; } .loading .art7 { width: 20px; height: 30px; top: 68px; left: 0; } .loading .art8 { width: 20px; height: 26px; top: 72px; left: 24px; } .loading .art9 { width: 20px; height: 40px; top: 58px; left: 48px; } .loading .art1 { -webkit-animation: loadingArts 0.4s ease-in-out 0.25s forwards; animation: loadingArts 0.4s ease-in-out 0.25s forwards; } .loading .art2 { -webkit-animation: loadingArts 0.4s ease-in-out 0.5s forwards; animation: loadingArts 0.4s ease-in-out 0.5s forwards; } .loading .art3 { -webkit-animation: loadingArts 0.4s ease-in-out 0.75s forwards; animation: loadingArts 0.4s ease-in-out 0.75s forwards; } .loading .art4 { -webkit-animation: loadingArts 0.4s ease-in-out 1s forwards; animation: loadingArts 0.4s ease-in-out 1s forwards; } .loading .art5 { -webkit-animation: loadingArts 0.4s ease-in-out 1.25s forwards; animation: loadingArts 0.4s ease-in-out 1.25s forwards; } .loading .art6 { -webkit-animation: loadingArts 0.4s ease-in-out 1.5s forwards; animation: loadingArts 0.4s ease-in-out 1.5s forwards; } .loading .art7 { -webkit-animation: loadingArts 0.4s ease-in-out 1.75s forwards; animation: loadingArts 0.4s ease-in-out 1.75s forwards; } .loading .art8 { -webkit-animation: loadingArts 0.4s ease-in-out 2s forwards; animation: loadingArts 0.4s ease-in-out 2s forwards; } .loading .art9 { -webkit-animation: loadingArts 0.4s ease-in-out 2.25s forwards; animation: loadingArts 0.4s ease-in-out 2.25s forwards; } @-webkit-keyframes loadingArts { to { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; } } @keyframes loadingArts { to { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; } } @-webkit-keyframes loadingRotate { to { -webkit-transform: translateZ(0) rotateY(360deg); transform: translateZ(0) rotateY(360deg); } } @keyframes loadingRotate { to { -webkit-transform: translateZ(0) rotateY(360deg); transform: translateZ(0) rotateY(360deg); } } html { height: 100%; padding: 0; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; margin: 0; -webkit-perspective: 300px; perspective: 300px; } <div class="loading"> <div class="art1"></div> <div class="art2"></div> <div class="art3"></div> <div class="art4"></div> <div class="art5"></div> <div class="art6"></div> <div class="art7"></div> <div class="art8"></div> <div class="art9"></div> </div> You can open in different browsers.
And actually, how to be? Are there any miracle properties with the
-moz- prefix to smooth everything out or not? Or other properties of the animation, and I obsolete transform: rotateY() ruined everything?
