search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 162 forks source link

Browser zooming #91

Open generatepress opened 8 years ago

generatepress commented 8 years ago

Had a user of my theme complain that they were losing the grid when zoomed in 125% at a certain browser width.

For example, if you zoom in 125% in Chrome 52.0.2743.116 m and resize the browser so it's at the exact pixel before the regular grid turns into the tablet grid (min-width: 1025px in my case), no grid applies for that 1px.

This doesn't happen at regular zoom, it goes from min-width:1025px to max-width:1024px flawlessly.

It only happens when zoomed in.

If I switch it to max-width:1024.9px, it works fine.

I'm assuming the browser is adding decimal points to the width, which is causing the issue.

Is there a better way around this? Maybe there's something logically wrong with my code?

Here's an example of what I'm doing: http://codepen.io/tomusborne/pen/dXaxOj

Thanks!

generatepress commented 8 years ago

Found a fix that works: http://stackoverflow.com/questions/38981132/media-queries-browser-zoom

Might be worth considering adding to the responsive file :)

nathansmith commented 8 years ago

Interesting. Sorry for the delayed reply, I haven't had time to dig into this yet.

So, is that due to "retina" screens, operating at a half-pixel level?

generatepress commented 8 years ago

No worries.

I was pulling my hair out, one of my users kept bringing it up and it made no sense to me.

I don't think it's retina, it's just the way Chrome (maybe others) sets the browser size when zoomed in. At some point neither 1024px or 1025px are true (when it's in the middle).