Is There a Bug in Chrome's CSS Visibility Rendering

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



Leave a reply



Submit