Bug in Chrome or bad CSS? (anchor with visibility hidden)
I'm not sure there's a standard behavior for invisible stuff inside an <a>
.
However, i've noticed that setting the display
to either block
or inline-block
makes the link clickable in Chrome. Not sure about other browsers, but if they already display it, that shouldn't break it.
Rendering bug in Google Chrome at certain window widths
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
- The hidden/clipped elements become visible when they are selected.
- The elements underneath the hidden/clipped elements are not clickable.
- This indicates that
z-index
and height is correct. - It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
- Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d
or translate3d
. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Chrome/webkit not rendering css display change on input:checked + element + element
Chain A Pseudo-Class
This demonstrates that this code fixes the bug (note that nth-child(n)
matches any element, but the adding of it into the chain causes it to work):
input:checked + label:nth-child(n) + section {
display:block;
}
CSS display issues in Chrome: background-image & position
I just wanted to post your solution so that it was obvious it had been found, and anyone looking for the answer doesn't miss it. It looks a bit hidden up in your question.
The position problem was fixed by specifying a percentage position instead of a pixel position, in the css created by the jquery for animating the title. No general solution to this, or what it was about Chrome that changed. Could not reproduce in a test environment, so it is something about my page in addition to changes in Chrome.
Chrome bug? Content not rendering multi-columns properly
The temporary solution for this was adding transform: translateZ(0)
to my .item
element as this enable hardware acceleration.
Related Topics
Getting Application.CSS to Override Bootstrap
How to Simply Parse a CSS Like (!) File in My Qt Application
Jsf2 Add Custom Font to CSS Stylesheet
Height: 100% Inside Min-Height: 100%
How to Change Background-Color on Text Links on Hover But Not Image Links
In Less CSS How to Get Less to Watch a Bunch of Files But Compile a Different File When They Change
Firefox Unexpected Line Break Using Floats & Overflow Hidden
Set Font Size of Angular Material Tooltip
Set Dot Color of 'Text-Overflow: Ellipsis'
How to Make Text Take Full Width of It's Container
How to Make IE8 Honour Opacity on an ':Before' Pseudo Element
::After on :Hover Does Not Work in Ie
H1 Tag and P Tag on the Same Line