User Experience (UX)
by Anonymous
share this
« Back to the Blog

jQuery and Safari animation display problems

jQuery and Safari animation display problems

If you are reading this, there is probably a really good chance that you're using jQuery. If not, you can read more about it. Basically, jQuery uses JavaScript and CSS to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides a way for developers to create plugins that sit atop the JavaScript library. Using these facilities, Internet developers can create low-level interaction and animation, advanced effects, and high-level, themed widgets. Use of jQuery contributes to the creation of Web 2.0 dynamic Web pages. jQuery is fairly easy to implement and fun to work with.

Recently we implemented a jQuery animation for a client. At a certain interval, text would slide across the screen. During cross-browser testing, we found that in Safari 4, the text was leaving a trail on the background image as it scrolled across the screen. See here:               

After quite some time researching and testing, we came to the conclusion that the problem is associated with sans-serif fonts used in Apple's Safari 4. Any sans-serif font we used on Safari with the jQuery animate affect caused a trailing line. Our implementation involved ASP.NET C#, IIS6 and jQuery 1.4.2. If you run into a problem with Safari displaying your animation incorrectly, check your fonts. To fix our issue we converted the text into .png images. The resulting effect was good. Notwithstanding, we would have prefered to have used text.

We would like to hear from you if you are having a similar issue with jQuery.


Thank you for contacting us!

We'll be in touch!

Back Home ×