The Old Blog Archive, 2005-2009

Opacity Quirkiness on Mac Browsers

Dave Shea has discussed the opacity bugs found in both FireFox and Safari. This has been plaguing FireFox 2.0 on Mac for a while: whenever there is an element with a < 1.0 opacity, the page’s font rendering becomes very thin, sometimes causing hard to read pages. Currently there doesn’t seem to be any solution to it, other than not using opacity at all.

Lately I have found that opacity can affect Safari’s performance, too. If your pages contains element overlays that have opacity settings, when there are a few of them (say around 10), Safari becomes extremely slow in loading and rendering the page. If you open the page as a tab, switching to the tab will be very slow too. This badly affects the performance of JavaScript in the page, notably the Scriptaculous sortables. It has misled me to think that Scriptaculous was the culprit. After I removed the opacity settings, the sortables are as smooth as it should be. And no, running Safari on a MacBook Pro doesn’t help.

For testing, please open up both this slow version and fast version. The only difference is that the overlays in the slow version have opacity set.

WebKit and FireFox don’t have such problem.

:: Jan.27.2007 :: tekhnologia :: 3 Comments »

3 Responses to “Opacity Quirkiness on Mac Browsers”

  1. on 23 Oct 2007 at 11:40 pm1Benxamin

    When using lightbox, greybox, thickbox or any number of javascript overlay scripts to present embed video, opacity

  2. on 03 Dec 2007 at 1:41 am2ruzee.com - Steffen Rusitschka » Blog Archive » Fat Transparent ShadedBorders

    [...] NewTrax and loads of others asked about the progress with the Safari 2 performance. Well… There isn’t… Apparently the problems result from the poor rendering performance of Safari 2 when lots of semi-transparent elements are on your page. As for ShadedBorder, there are millions. So maybe it’s a good approach, as NewTrax suggested, to disabled ShadedBorder on Safari 2 – not that bad, at least we’ve got the graceful degradation feature… [...]

  3. on 21 Oct 2008 at 5:45 am3Fat Transparent ShadedBorders | ruzee.com - Steffen Rusitschka

    [...] There isn’t… Apparently the problems result from the poor rendering performance of Safari 2 when lots of semi-transparent elements are on your page. As for ShadedBorder, there are millions. ;-) So maybe it’s a good approach, as NewTrax suggested, [...]