span hidden or not on webkit browsers

Question

How to check if a <span> is hidden or not on webkit browsers (chrome/safari).

Following this code:

<span>
    <div>TEST</div>
</span>

On chrome/safari, this span always appears to be hidden which is not.

Trying both :hidden and :not(:visible) {jq} or (element.offsetWidth === 0 && element.offsetHeight === 0) {js} give same result.

Only setting some kind of css padding to the span seems to get rid of this behaviour, but it's not acceptable in the special case i'm working on.

I'm aware there are some relative tickets on jquery tracker but i cannot figure an adequate workaround.

Could you help me on this one?

SEE DEMO

Your span contains a
tag - which it shouldn't. When you inspect the div it states that it has height and width of 0, ergo it's not visible. — Michael Kunst, May 30 '13 at 16:10
I'm aware of not valid html code but unfortunately this code is not mine. So, is there any alternatives? — A. Wolff, May 30 '13 at 16:13
@roasted Maybe not a great way but `console.log($('#myspan').css('visibility'));` — dsgriffin, May 30 '13 at 16:22
@roasted Ah You're correct. Seems like a webkit bug :/ I looked around and saw some other mentions of this problem too — dsgriffin, May 30 '13 at 16:25
@roasted Yep, http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome. I think you've got the good answer mentioning display block — dsgriffin, May 30 '13 at 16:28

score 2 · Accepted Answer · answered May 30 '13 at 16:14

2

If you set display:block on the span, it seems to work.

http://jsfiddle.net/eREQJ/1/

answered May 30 '13 at 16:14

gotohales

3,665
1
20
34

display:block looks like not so bad alternative thx Fixed your jsfiddle:http://jsfiddle.net/eREQJ/1/ – A. Wolff May 30 '13 at 16:15
Yeah, just noticed it wasn't quite working the way I'd thought heh. But at least it eventually helped. :) – gotohales May 30 '13 at 16:17
In fact, i think its a good workaround, just have to set css display to these specific span then reset it when checked – A. Wolff May 30 '13 at 16:28
I'd agree. I've definitely seen some weirdness before on any display:block element nested in a display:inline element. – gotohales May 30 '13 at 16:33
Thx mookamafoob for your input :) – A. Wolff May 30 '13 at 16:34

score 0 · Answer 2 · answered May 30 '13 at 16:13

0

var element = document.getElementById('myspan');
if(element.getAttribute('visibility') == 'hidden'){
    console.log('true')
}else{
    console.log('false')
}

demo

answered May 30 '13 at 16:13

Ryan

5,644
3
38
66

span hidden or not on webkit browsers

2 Answers2