Blurring Text about animate.css HOT 8 CLOSED

Hmm, interesting. Could you isolate this in a test page and link to it?

from animate.css.

Try it on this page. You'll need to refresh the page a few times. Its kind on an anomaly, but when it occurs its pretty bad. I have also taken screen shots I can share. You'll have to test it on an iPhone because that is where the issue is occurring. I am actively working on this so hopefully you can reproduce it.
Test page: http://luckie.joshuapekera.com/resume
Screenshots:
https://skitch.com/joshuapekera/er997/photo-1
https://skitch.com/joshuapekera/efyyx/photo-3
https://skitch.com/joshuapekera/efybf/photo-2

from animate.css.

Fix

Ok I may have found a fix. There was a post on stackoverflow (http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d) regarding something similar using translate3d. Apparently it is a webkit issue affecting the iPhone or mobile devices more than anything else. They offer a fix by suggesting you add:

-webkit-font-smoothing: subpixel-antialiased;

to any animated blocks of content in your css. I tried this and it seams to have worked.

Tip

I created a separate css file to handle my animations. I named it "keyframe.css". I simply added the above css to each #id element that is being animated. It turned out to be a very simple and easy fix. I also included media queries in the keyframe.css file that allow me to adjust the timing of different animations for mobile devices. This really helped adjust when an element loaded and was presented to a user. Elements like social plugins from Twitter and Facebook that load in an iframe are usually jumpy and load inconsistently with the rest of the content. The adjusted animation timing allowed me to have those elements load in the background and then present them in a very elegant way to the user by using fadeInDown or something similar. It's extremely powerful to have the ability to control how and when something is presented to a user. Thanks for creating all these great animations Dan. They have been a tremendous time saver. I hope this issue and fix I encountered help someone else in the future.

from animate.css.

Also, if you want to adjust an animation class for an entire page loading on a mobile device here is some sample code I wrote using jquery.

if ($(window).width() <= 767) {
            $('.bounceInLeft').removeClass('bounceInLeft').addClass('fadeInLeft');
            $('.bounceInRight').removeClass('bounceInRight').addClass('fadeInRight');           
           }

This script detects a viewport for any type of mobile device and adjusts the animation class specified. In this example, I replaced all "bounceIn" animations for a "fadeIn" counterpart. The "fadeIn" was more subtle and worked better on the mobile device. This will not affect tablets though. You'll have to adjust the script if you want to make changes for a device like the iPad etc.

from animate.css.

Hmm, very bizarre. That font smoothing trick is employing 3D hardware acceleration, which translate3d does anyway. I'll have to investigate this further. Thanks for bringing it up. Btw, what device & iOS version is this on?

from animate.css.

OS X Lion 10.7.4 and iOS 5.1.1 on an iPhone 4S

from animate.css.

Hi guys

Not sure if this helps or is entirely related, but I am having another issue on Webkit only.

When I include animate.min.css into my page, several of my fonts are ruined (see screens below)

With the CSS file included: https://www.evernote.com/shard/s43/sh/18b2be30-717a-4746-aa4a-1fa8aa4c769f/6e8a1b0abfe849c113dd536a50acdb03

Without the file: https://www.evernote.com/shard/s43/sh/13adc89b-a8b7-403d-9f37-fa8dd66781ad/95660e9829a045aad11c32d2abd42a6a

This is only affecting some fonts, and only in Chrome / webkit.

Update:

I've narrowed it down specifically to this:

-webkit-backface-visibility: hidden;

When this is removed the fonts work fine.

from animate.css.

Just thought I would share what I found. Meant to post this a while ago. The issue is when you have multiple tabs open in mobile safari. When you are using keyframes you are consuming GPU memory. When you are testing a site that is using a lot of keyframes and it has several instances open the iPhone can have low memory issues that cause rendering issues on new tabs. The fix is to close additional tabs in mobile safari that is using the keyframe animations. You can also power off your phone and back on. Continually testing a site can run away with you and quickly cause you to have several instances of your site open thus triggering low memory issues. Hope someone else finds this helpful.

from animate.css.