23
Ho un bug frustrante in Safari attorno al ritardo di animazione CSS.Timer di animazione CSS disattivato in Safari e Mobile Chrome
Questa animazione funziona magnificamente su Desktop in Chrome, Firefox, IE11, IE10, ma ottengo risultati misti in Safari. I pezzi della borsa dovrebbero tutti essere visualizzati dopo una quantità uguale di pausa (controllata dal ritardo dell'animazione).
Desktop Safari a volte viene visualizzato correttamente, mentre altre volte rallentano la prima parte della transizione della borsa e accelerano la fine, o raggrupperà alcune transizioni insieme. In Safari mobile e Chrome mobile su un iPhone 6, a volte ignorerà il ritardo di animazione tutti insieme e trasferirà l'intera busta in una sola volta. Ho difficoltà a risolvere i problemi quando le prestazioni non sono coerenti. Ho aggiunto un piccolo JavaScript per assicurarmi che tutte le risorse siano state caricate sulla pagina prima di avviare l'animazione, ma ciò non sembra essere di aiuto. Qualcuno ha idea di cosa sta succedendo qui?
http://codepen.io/brendamarienyc/pen/qdoOZM
@-webkit-keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
@keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
.satchel-1 {
-webkit-animation-name: bag-1;
animation-name: bag-1;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-1 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
@keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
.satchel-2 {
-webkit-animation-name: bag-2;
animation-name: bag-2;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-2 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
@keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
.satchel-3 {
-webkit-animation-name: bag-3;
animation-name: bag-3;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-3 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
@keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
.satchel-4 {
-webkit-animation-name: bag-4;
animation-name: bag-4;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-4 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
@keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
.satchel-5 {
-webkit-animation-name: bag-5;
animation-name: bag-5;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-5 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em auto;
position: relative;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
-webkit-animation-delay: 0;
animation-delay: 0;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
-webkit-animation-delay: 1800ms;
animation-delay: 1800ms;
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}
Questa risposta aiuta in qualsiasi modo: http://stackoverflow.com/a/9431098/4586918 – akshay
Grazie akshay, ma non aiuta. Ho già impostato tutto come consigliato in quella risposta. – Brenda