animacje CSS3 klatek kluczowych powolny na wyświetlaczu Retina

Question

Weź bardzo podstawową zasadę animacji CSS3 tak:

.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; 
    } 
} 

w Chrome na każdym wyświetlaczu, oprócz wyświetlacza Retina MacBook, animacja działa gładkie jak jedwab. Kiedy próbujemy tego na siatkówce MBP, animacja działa wyraźnie wolniej i generalnie wydaje się opóźniona.

Mam taki sam przypadek podczas korzystania z Transit (jeśli masz siatkówkę i zewnętrzny wyświetlacz, spróbuj uruchomić dema Transit (lub dowolną animację CSS3?), Porównując dwa ekrany i powinieneś poczuć, że nie jest tak gładki jak chcesz)

Próbowaliśmy użyć GPU ustawiając -webkit-transform: translateZ(0), a także kilka innych rzeczy, takich jak -webkit-backface-visibility: hidden, ale na próżno.

Widocznie wyświetlacz Retina ma większą gęstość pikseli, ale jakie rozwiązania można zastosować, aby rozwiązać ten problem?

Answer 1

Po pierwsze, zmieniłbym pierwszy height:0; na height:0px; - może to zapobiec błędom w starszych przeglądarkach.

Po drugie spróbuj dodać właściwość will-change. Ułatwi to animację w niektórych przeglądarkach.

Poza tym stwierdzam, że zakłócanie wysokości animacji może powodować wiele problemów. Wolę iść z czymś takim:

.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; 
    } 
} 

Daj mi znać, czy to zadziałało :)