Weird Float Rendering in Chrome When Using Media Queries

Weird float rendering in Chrome when using media queries

Looks like a Chrome issue that's been out there for a while.

https://bugs.webkit.org/show_bug.cgi?id=53166

Another Stacker with the same issue.

Webkit float and display

Media Queries acting funny in Chrome/Safari

If you'll add css float: left; to #forms #email everything will be fine.

You can test it here: http://jsfiddle.net/witchfinderx/qwnXT/1/

Media query layout issue with scroll bar in chrome

I think Chrome enters into infinite loop here. After you go just a tad below 500px he removes vertical scrollbar, but right after he removes scrollbar window width is back above 500px and he applies CSS for that width which in turn again needs vertical scrollbar and we are again at the same place where we started... so infinite loop.
Basically Chrome just protects itself from infinite loop by leaving the space that the vertical scrollbar was using.

As far as I can see you can either remove the scrollbar completely i.e. overflow:hidden on body (but I guess that's not much help for 99% of websites), or leave it on at all times on body with overflow-y:scroll.

EDIT:
Maybe you could try removing scrollbar on body tag, but encapsulate all content in one div with overflow-y:scroll. Even though div is as wide as body, it seems to work this way, no glitches in my test. This would require setting up this div to be 100% height of the screen which could be though.

Media queries and percentage width causes strange IMG shrinking behaviour on webkit browsers

Ha!, that is a funny effect. To fix it, use max-width rather than width:

@media (max-width: 679px) {
  img.retina-zoom { max-width:75%; }
}

Edit: Note this doesn't happen in the latest Webkit Nightly so perhaps it's a bug that's been fixed.

---

Related Topics