Chrome Dev tools & visibility:hidden

[mahks]

Re : Chrome Dev tools

On my page I have a bunch of full screen iframes that I set to visibility:hidden when not needed.

If I r-click on the page & select inspect element, the top most of these iframes gets "selected" in the elements tab of Dev tools.

Is there a way around this, or do I have to reorder my tags?

In firefox/firebug the selection depends on what is actually visible, (same as what the user sees)

[MikuzA]

Hello,

haven't tested but you might try playing around with the z-index, or similiar weight so that you 'push' the hidden frames behind the content and when you wish to unhidden them, change also the z-index.

Hope this helps

br,
Michael

[mahks]

Yes, z-Index would do that, but the iframes are in a specific order needed for the site to work.

I would hope I do not have to redesign the site to use a dev-tool!

Why would they have it so hidden objects are not ... um ... hidden?
I suspect I'm just missing something ... (being new to chrome and all)

[Winawer]

Have you tried display:none?

[mahks]

The point is to not have to change the code to inspect the HTML with a tool.

[mahks]

Another issue is that there seems to be no way to fully expand a tag in the HTML view.

I can't access the element I can see on the page, because there are hidden( ) objects in front of them.
So I go into the HTML viewer and have to drill down a dozen clicks to get to the element I want.

Can this be the way it is?

Loaded firebug lite, seems extremely crippled compared to regular firebug and is of no help to me for this.

Is there any other tool anyone can suggest?

[Jackolantern]

Hmm...I have not come across this, even when using a ton of hidden objects in my MUD.

So this is not an issue with how the page is running? It is only an issue with debugging using the Chrome Dev Tools?

And just to be sure I understand it, you can't click on the element you want because CDT are still making the hidden elements laying over the desirable element clickable, but the elements are not selectable in the "Elements" tab because they are hidden? Or am I way off here?

[mahks]

No, it is right-click in the browser window (on an element I can see) then "inspect element" in the context menu, that is the main issue. The hidden iframe generates a mouse event to devtools so it gets displayed/selected in the dev-tools elements panel rather than the object I appear to click on.

I asked on stack overflow : http://stackoverflow.com/questions/2060 ... ork-around

A chrome guy agreed there was an issue and created a bug report : https://code.google.com/p/chromium/issu ... ?id=328856

[Jackolantern]

Oh, interesting. Yeah, I have not come across that issue before, but I hope it gets resolved, particularly since it appears to be a bug in the dev tools.

[mahks]

Looks like the problem is not dev tools, seems Chrome has issues with iframe & visibility ... a hidden iframe isn't.

I tried to change my iframes to using display rather than visibility, got all swapped, then realized why I used visibility in the first place! Arrrgghh.
Display collapses the dimensions of an object, visibility does not. So you can't use display:none and referrer to things like clientWidth and scrollTo.

Unless I am missing something?