I have a div for which pointer events is set to "none". I can click through to elements underneath fine, but if I right click an element and inspect it with Chrome, it gives me the div that's on top. Does anyone else have this issue? I don't remember it being an issue before.
Per this Chromium issue comment, you can hold Shift while using Chrome's inspect element from devtools, which will highlight elements (with parent element in red) even when they have pointer-events: none on them.
According to this https://code.google.com/p/chromium/issues/detail?id=136887 it is proper behaivor.
What was before (when you can't inspect elements with "pointer-events:none") was a bug.
Chromium has tests for this fix: https://chromium.googlesource.com/chromium/blink.git/+/dfcf6a3782dcae5dd16baec94040b931b0791fa6/LayoutTests/inspector/elements/inspect-pointer-events-none.html
Related
On a freshly loaded site, when I go inspect an element, a CSS property is always unchecked. It's there and I can enable it, but it's unchecked by default.
The style is position: sticky
Tried this in different browsers:
* Chrome and Firefox: it's unchecked, but I can toggle it
* Safari: it's "commented out" and also I can toggle it
To be clear: I don't see any other position styles being applied on that same element.
Any ideas?
Figured it out - the style was actually commented out in code.
What surprised my was Dev Tools picking up commented out styles and listing it.
Updated: as #sebastian-zartner pointed out, these commented out styles will always be displayed
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Safari requires a -webkit- prefix
I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.
I am referring to the main navigation bar at the top:
http://gratefulglass.viussandbox.co/
I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.
Any suggestions would be greatly appreciated.
The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.
Check this links:
1,
2
Sorry, but cant put more links:
http:// && joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/
http:// && www.webdeveloper.com/forum/showthread.php?163100-Opacity-hover-not-working-in-IE
Some properties behave different or are not persistent depending the browser.
But there is always a way to make it work.
Best way to make it work, javascript.
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I have a couple links on this page (http://tuscaroratackle.com) that are ending up at unexpected positions in their :active state. The links are absolutely positioned, so I'm guessing the issue is partly due to that. But I can't figure out what rules are getting applied on :active to make them shift down and to the left so far. I do have one rule that makes them "depress" a bit on active ( a:active {position:relative; top:1px;} ) but can't quite figure out why they are shifting so badly.
The links in question are these:
it's the "See Rods" link that appears on hover. If you click you'll see the awkward resulting positioning.
Also for those that don't know (I recently found out) you can inspect the :active state in firefug. Just use the drop down arrow on the style tab to toggle those styles on.
From description of position:absolute:
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
And, as you noted, you have position:relative; defined for a:active. Now, therefore, in <a><span></span></a> combination position of span is counted relative to position of a, not to position of .hp-promo-item.
As for solution, if you need to move a down 1 pixel on :active, maybe margin-top will work better. But wait, you already have margin-top:1px for .promo-content .icon. Well, maybe margin-top:2px !important; then. I don't really understand the aim to suggest more.
PS Thanks for telling about :active helper in firebug, pretty useful!
(clickable)
Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).
Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..
What's going on?! :(
Do you have AdBlock installed? That might be hiding that div.
An extra little note: FireBug will actually show something like this in the Style pane when AdBlock Plus is blocking it (wrapped for clarity):
.mainad, #mainad { undefined (line 233)
-moz-binding:url(chrome://global/content/bindings/
general.xml?abphit:707307897865#basecontrol) !important;
}
Firebug displays selectors without HTML content, or block element styles as gray. If you edit the HTML, and add some copy you will see the selector regain its colors.