HubSpot / odometer

Smoothly transitions numbers with ease. #hubspot-open-source
http://github.hubspot.com/odometer/docs/welcome
MIT License
7.3k stars 712 forks source link

translateZ GPU hack causes problems in iOS #134

Open marfire opened 7 years ago

marfire commented 7 years ago

I'm using an Odometer in a WKWebView on iOS 10.2. In some circumstances it will flicker in and out of view during the animation, before finally reappearing when the animation is over.

That sounds like some kind of GPU-related rendering bug, and sure enough, when I removed the translateZ hack introduced in #16 everything worked fine. The flicker that the hack was designed to prevent did not occur. Sometimes the CSS hacks that work in one version of a browser end up breaking something else in a later version.

I haven't precisely narrowed down the circumstances when this rendering bug happens, and I won't bother since removing translateZ seems to work in all circumstances. This library appears to be abandoned, but users can override the hack with:

.odometer-ribbon-inner { -webkit-backface-visibility: visible !important; }
.odometer-value { -webkit-transform: none !important; }