Menu icon Foundation
Breakpoint pixel gap

I was testing an element where there's no global style and styling only applies within specific breakpoints that there's a 1px gap between breakpoints.

From _settings.scss

$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */

However, 64.063 isn't 1025px at 16px per em - it's 1025.008px. To get 1025px, I'd need the range to start at 64.0625em and the same is true for the other breakpoint crossovers as well.

The effect is that if my browser viewport is at exactly 1025px, I get neither medium rules or large rules. Is there a reason for this or a browser limit to the number of decimal places ems can be defined to?

breakpoint

I was testing an element where there's no global style and styling only applies within specific breakpoints that there's a 1px gap between breakpoints.

From _settings.scss

$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */

However, 64.063 isn't 1025px at 16px per em - it's 1025.008px. To get 1025px, I'd need the range to start at 64.0625em and the same is true for the other breakpoint crossovers as well.

The effect is that if my browser viewport is at exactly 1025px, I get neither medium rules or large rules. Is there a reason for this or a browser limit to the number of decimal places ems can be defined to?

Rafi Benkual almost 5 years ago

We've never seen an issue with this.

Have you tried adding the extra decimal place to medium range like 64.062?

Would love to see a screen shot of it happening.

Peter Gibb almost 5 years ago

I've stripped the rest of the page out to isolate the issue.

The issue can be seen at 961px (1px above the upper-bound for the medium breakpoint on our site).

This file is built using the native lower-bound breakpoints of .063em
http://demo.icaew.com/peter-gibb/breakpoint-pixel/60-063em.html

With this file at 961px, neither the medium or large breakpoint media queries apply.

Changing the lower-bound breakpoint settings to 0.625em (60.0625em x 16px = 961px) results in this file:
http://demo.icaew.com/peter-gibb/breakpoint-pixel/60-0625em.html

With lower-bound breakpoint settings changed to 0.62em also seems to work though the maths aren't quite so clean (60.062em x 16px = 960.992px
http://demo.icaew.com/peter-gibb/breakpoint-pixel/60-062em.html

This is the only scenario I've seen the issue in, but it does make me wonder if there are going to be other problems in these 1px crossover areas.

Peter Gibb almost 5 years ago

Hi Rafi,

By way of an update, I can confirm that cross-browser testing has shown this to be an issue specific to Google Chrome 40. Other browsers seem to be fine, and indeed Chrome 39, but Chrome 40 in both OS X and Windows exhibits this problem.

Thanks,

Peter

Torkil Sinkaberg Johnsen almost 5 years ago

I have seen this issue too. Single pixel values should be defined as 0.0625em. In Foundation global settings they were set to 0.063 (see https://github.com/zurb/foundation/blob/master/scss/foundation/_settings.scss). I have no idea why, but I'm guessing there was a good reason.

I have adjusted my range settings and increased the number of decimals to four, and so far everything seems to be in order:

// 1 - 0.0625 = 0.9375
$small-range: (0em, 39.9375em) !default;
$medium-range: (40em, 63.9375em) !default;
$large-range: (64em, 89.9375em) !default;
$xlarge-range: (90em, 119.9375em) !default;
$xxlarge-range: (120em, 99999999em) !default;

Ethan Hackett almost 5 years ago

I'm running into this too. The 1025 view is neither medium nor large size and defaults to mobile view. Example

It's only happening in Chrome and my version is 40

Rafi Benkual over 4 years ago

Thanks for the examples guys. It's always been tricky with Chrome and how it decides to round up or down.

We are getting as many fixes into our next release 5.5.2. We'll be looking into this for this release.

Peter Gibb over 4 years ago

Thanks Rafi. My original question was simply if there's a reason why we can't / shouldn't define the range in ems to 4 decimal places as this gives the exact value and takes rounding issues out of the equation. This seems to work but I didn't know if there was some greater reason why it should be avoided.

Thanks

Rafi Benkual over 4 years ago

There is no reason you cannot. The issue lies with how Chrome and how it is rounding inconstantly. Se we're looking for ways to circumvent that. If you try it, post back and let us know how it goes.

Dan Copeland over 4 years ago

This bug was making me think I was crazy! Thanks for figuring this one out, gang :)

Same issue in Chrome Version 42.0.2311.60 beta (Canary)

Peter Gibb over 4 years ago

The rounding issue doesn't seem to be a problem in Chrome 41 but sounds like it may be back in Chrome 42.

We've implemented the range definitions to 4 decimal places and that seems to be working with no ill effects on Chrome or any other browsers.

Thanks for your help.

Steven Leimberg over 3 years ago

OH MY GOD, LOOK AT THAT GAP! XD

What?

Oh, right, back to business...

Hello everyone!

I'm using Foundation 6 Sites SASS files and have run into this 1px gap issue when using the "small only" combined with the "medium" breakpoint. My settings are as follows:

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

When my SASS compiles, "small only" and "medium" result in:

@media screen and (max-width: 39.9375em) {}

@media screen and (min-width: 40em) {}

Thus, there is in fact a gap of 0.0625em, which when multiplied by 16 is 1px (as most including Torkil probably realize). I assume this is intentional to avoid overlap, but it does effectively create a 1px "gap".

@media screen and (max-width: 639px) {}

@media screen and (min-width: 640px) {}

For most, when the browser is not "zoomed in" using "Ctrl+" (effectively at 100% zoom) this gap is only 1px wide and is avoided since browser width is rounded to the nearest pixel (skipping over the 639.0001-639.9999 gap). If, however, the browser is "zoomed in" at all (125%, 150%, 200%) this tiny gap is exacerbated (since the effective browser width is now "smaller" but stretched, allowing a single pixel to now fit within the .0001-.9999 gap revealing itself to the user. This is probably pretty sporadic since it depends on how your browser rounds, how wide your breakpoint is, and how zoomed in the page is. 

I did find one solution that avoids the gap, but I'm not sure it could be used in all cases. Maybe for situations such as "small only" or "medium only"?

@media not all and screen and (min-width: 40em) {}

@media screen and (min-width: 40em){}

Are there any other ways to avoid this?