Safari 2.0, display:none, and getComputedStyle

It almost sounds like the beginning of a joke...("Safari, Display:none and getComputedStyle walk into a bar..."). Anyways, I just ran into this and thought I'd share.

In Safari 2.0.4 (419.3), you can't use getComputedStyle on an element that has display set to none. It's like the element doesn't even exist. Luckily, the latest Webkit builds have fixed this little niggle.

For a quick test case, check out the following. Click on "get style" and you should see [object CSSStyleDeclaration]. Click on toggle display to hide the content and then click on "get style" again. In Safari, you'll get null. Null is bad.

How often does Safari get updated anyways?

Published November 16, 2006
Categorized as JavaScript
Short URL: https://snook.ca/s/722

Conversation

14 Comments · RSS feed
Jeff Croft said on November 16, 2006

> How often does Safari get updated anyways?

Pretty often. Yeah, I know that's not a very scientific answer. But, Safari is updated along with almost every OS point release, and usually a few times in between. On average, I'd say it's maybe every two months?

Adrian D. said on November 16, 2006

Here’s a nice overview of the safari version number history:

http://developer.apple.com/internet/safari/uamatrix.html

Luis said on November 17, 2006

I sadly think that Apple could include finally Firefox as its default browser in MAC OS X. All we know that's a complicated change to them, but will be a nice decision isn't it?

I found some issues in Safari in the past, fortunetly it seems a lot of them have been solved. The major problem: Safari is based on the old Konqueror brower :|

Nice blog snook

Jonathan Snook said on November 17, 2006

Adrian: that's a great link. Thanks!

Safari's handling of display:none has bit me before, too, which is never fun. In fact, it was troublesome for a previous project for the same client.

Luis: sometimes it feels like every OS should just use Firefox as the default. :)

Marco, the site guy said on November 17, 2006

I always thought that elements given the display: none; attribute are treated as if they don't exist in the document flow.

On a related note, anyone tried solving Safari ignoring backround: none on input elements. It seems Apple is hell bent on applying that aquafied look on its buttons and form elements no matter what you do.

Luc said on November 17, 2006

Also, if you have an input field in a div display:none, the field is not posted with the form.
Thank you for the test page.

Jonathan Snook said on November 17, 2006

Marco: yeah, display:none should be treated as if it doesn't exist in the document flow. But Safari treats it like it doesn't exist. :)

Tobie Langel said on November 18, 2006

Prototype deals with this issue by temporarily showing the hidden element with visibility set to hidden and position to absolute.

That bug has been aroun for a while, btw.

Jonathan Snook said on November 18, 2006

Tobie: actually, the getStyle method in Prototype doesn't do that. I believe some of the stuff within Scriptaculous does.

The fact that we're talking 2.0, I think the fact the bug still exists is self evident that it has been around for awhile. Despite that, a search on the matter didn't really reveal any insight, which is why I wanted to document it here.

Tobie Langel said on November 18, 2006

Jonathan, you are totally right...

Actually it is the getDimensions method which uses this technique.

But is should definitely be extended to getStyle in regards to what you mention.

I am sometimes surprised by the amount of bugs Safari has. We all spend our time bashing on IE, but if, for example, we cannot device a cross-browser rich text editor, it is not because of IE, but of Safari.

It is also because of Safari that we cannot have a cross browser way dealing with navigation history and back-button functionality when using Ajax.

Jonathan Snook said on November 18, 2006

Tobie: yeah... the problem with modifying the style of an object to use getStyle means that you could never use it to retrieve display or visibility values. Not a big deal, I'm sure but certainly a consideration.

Justin Halsall said on December 02, 2006

Luis: I disagree, Safari was the first browser to pass the Acid2 test, and is in some aspects a better browser than firefox, I would rather have Microsoft change there standard browser to Firefox as it is still lagging behind greatly.

And remember what happened with IE when they had the biggest market share, they stopped innovating. Now there are still some points Firefox can learn from Opera and Safari and if these go away then it will be impossible to learn from the other browsers.

Klaus hartl said on December 04, 2006

If some parent element has its display set to "none", than the mentioned fix still doesn't work...

DiaboliK said on October 10, 2007

safari (webkit) should and probably always will be bundled w/ apple software since webkit is intertwined into many of apple's applications nowadays. its even in itunes store for windows for petes sake.

plus webkit is so far the most css3 compliant browser around.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.