CSS3 Keyframe Animationen träge auf Retina Display

Nehmen Sie eine sehr einfache CSS3 Animation Regel wie folgt aus:CSS3 Keyframe Animationen träge auf Retina Display

.dimension.fadeIn { 
    -webkit-animation: fadeIn 0.7s; 
    -webkit-animation-timing-function:ease-in-out; 
    height:24px; 
} 

@-webkit-keyframes fadeIn { 
    0% { 
    height:0; 
    opacity: 0; 
    } 
    30% { 
    height:24px; /* the default row (tr) height */ 
    opacity: 0; 
    } 
    90% { 
    opacity: 1; 
    } 
}

In Chrome auf jedem Display, mit Ausnahme des MacBook Retina-Display, läuft die Animation glatt wie Seide. Wenn wir es auf einer MBP-Netzhaut versuchen, läuft die Animation sichtbar langsamer und fühlt sich im Allgemeinen verzögert an.

Ich erlebe den gleichen Fall bei der Verwendung Transit (Wenn Sie eine Retina und ein externes Display haben, versuchen Sie Transit Demos (oder jede CSS3 Animation?), Vergleichen zwischen den beiden Bildschirmen und Sie sollten das Gefühl, dass es nicht so glatt ist wie Sie möchten)

Wir haben versucht, die GPU zu verwenden, indem Sie -webkit-transform: translateZ(0) und auch einige andere Sachen wie -webkit-backface-visibility: hidden aber vergeblich.

Also offensichtlich hat das Retina-Display eine höhere Pixeldichte, aber welche Ansätze können zur Lösung dieses Problems genommen werden?

Quelle

2013-10-17 subZero

IMHO Höhe Animieren immer Schwergängigkeit gibt. Versuchen Sie, ein anderes Attribut zu animieren. Wenn Sie zum Beispiel '-webkit-perspective' korrekt positionieren, können Sie mit 'translate: rotateY (-90deg)' den gleichen Effekt erzielen. Es ist nicht nur Netzhaut, wenn Sie ~ 1000 Elemente und belebte Höhe haben, ist es fehlerhaft. – drinchev

Ich animiere keine Höhe oder irgendetwas, das als langsamer betrachtet wird, dennoch beobachte ich das gleiche genaue Verhalten; auf Firefox und Chrome. – AlexG

Versuchen Sie, die Transformation zu transformieren: scaleY und sehen Sie, ob das hilft. Ich habe auch Tonnen von Kopfschmerzen mit völlig inakzeptabler Leistung mit dieser Art von Dingen. – Reasurria

Nun, zuerst würde ich die erste height:0; zu height:0px; ändern - das kann Fehler in älteren Browsern verhindern.

Zweitens versuchen Sie und fügen Sie die will-change -Eigenschaft hinzu. Dies wird die Animation in einigen Browsern erleichtern, die ich erlebt habe.

Außerdem finde ich, dass das Mischen mit der Höhe in Animationen eine Menge Probleme verursachen kann. Ich würde eher gehen mit so etwas wie:

.dimension { 
    transition: all .21s ease-in-out; 
    will-change: opacity, height; 
    height: 0px 
} 
.dimension.fadeIn { 
    -webkit-animation: fadeIn 0.49s; 
    -webkit-animation-timing-function:ease-in-out; 
    -webkit-animation-delay : .21s; 
    height:24px; 
} 

@-webkit-keyframes fadeIn { 
    0% { 
    opacity: 0; 
    } 
    90% { 
    opacity: 1; 
    } 
}

Lassen Sie mich wissen, ob es :) arbeitete

Quelle

2015-07-07 12:04:24 Leo

CSS3 Keyframe Animationen träge auf Retina Display

Antwort

Verwandte Themen