Tuesday, May 15, 2007

Safari Scrolling Sluggishness

I spent a long time working on a project trying to figure out why Safari was scrolling like a stuck pig. Okay, I don't quite know what a stuck pig scrolls like, but the scrolling in Safari was all herky jerky.

Signs pointed to a DIV that had was CSS position: fixed. I investigated floats, and positioning of other layers, and changing the fixed position to absolute and then static, but nothing seemed a complete cure (we'd done a JS static DIV previously and that had been no better).

After a couple hours, and about to give in, and say it was unfixable, I started to remove individual styles from the content. It suddenly was all better.

It turns out the culprit classes (styling some labels on sections of the page) had opacity set on them.

Now, strangely enough, it is not JUST having opacity. If you set up a page with opacity on a layer, or a P, the page works fine (in fact, there are other layers on the page that have opacity that have no effect on the scrolling).

The scrolling gets worse when:
1) there is a DIV that is position: fixed
2) there is opacity on pieces of text within other DIVs
3) those other DIVs are positioned and floated.

Labels: , , , ,