Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS webfonts degrading performance of css animations in iOS 4.3

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31960
    Nathan Adams
    Participant

    Hey all,

    I’ve been developing a site which makes use of css animations/transitions (including a 3D transform for Safari users), as well as webfonts (one via fonts.com, and another hosted myself).

    Everything works fine on desktop Safari, and worked fine in Safari under iOS 4.2. However, with the 4.3 update, animations have become terrible. There are delays in animations, delay in even rendering bits (causing transparent blocks to temporarily appear), and the animations themselves are very jerky.

    Doing some tests, removing all the webfonts makes everything run smooth again.

    Example with webfonts: http://nathan-adams.net/test/
    Example without webfonts: http://nathan-adams.net/test/nofont.html

    In the example, there’s a flip animation using 3D transforms (click the link at the bottom). And then there’s some blocks of content on the back, which can be navigated left and right. These are different heights and will change the height of it’s parent. (It’s a mix of jquery cycle, and css transition on the container height).

    Under 4.3, you can see weird transitions and display errors when flipping. And when scrolling through the blocks on the back, the entire block shakes up and down while the height is adjusted. With no webfonts, it’s all silky smooth. Likewise, if you view the one with webfonts under 4.2, it’s also smooth. (Fully replicable in the iOS Simulator too).

    Dropping the webfonts is not an option, so can anyone offer any advice on other ways of improving performance? It seems odd that performance would drop with a new version.

    Cheers,
    Nathan

    #55855
    Nathan Adams
    Participant

    To help illustrate the issue, here is some video from the iOS Simulator running 4.3.

    With webfonts: http://nathan-adams.net/test/flip-bad.mov
    Without webfonts: http://nathan-adams.net/test/flip-good.mov

    (Aside from linking the webfonts, the two test pages are otherwise identical)

    #55817
    Nathan Adams
    Participant

    No one else is having this issue?

    Given the increasing number of people developing sites and web apps for mobile Safari, I’d say this will become quite a problem as more users update to 4.3…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.