Foundation-sites: `down` or `only` breakpoint still applies on upper breakpoint

[ncoden]

As reported by @JasonMiller at https://github.com/zurb/foundation-sites/pull/10978#issuecomment-393301646, the new breakpoint precision (0.0001em) introduce a new bug on all major browsers (Chrome, Firefox, Safari...).

What should happen?

For the following code:

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
);

.test {
    @include breakpoint(medium down) { ... }
}

Properties should be applied for medium and under, so for a resolution strictly inferior to 1024px.

What happens instead?

Due to the breakpoint 63.99999em being rounded to 64em by most browsers for their breakpoint calculations, properties are still applied on the large breakpoint for 1024px exactly.

This issue is related to:

• #10978 Fix breakpoints precision issue with a smaller global font size (@JasonMiller)
• #10820 show-for() and hide-for() gap at exact width of breakpoint (@Lazerproof)
• #10695 'show-for-small-only' and 'hide-for-small-only' elements both displaying at a certain width (@hofuchi)

Possible Solution

As seen in #10978, we need a subpixel precision to handle zoomed browsers. But browsers handle sub-pixel mediaqueries badly and a too high precision causes the issue described above. So we have to find the proper balance for a maximum support.

After some research across their own issues (https://github.com/twbs/bootstrap/issues/19197), I took a look at the way Bootstrap handle this (cc @cvrebert @mdo). Here is the description of their Sass breakpoint-max function.

Maximum breakpoint width. Null for the largest (last) breakpoint.
The maximum value is calculated as the minimum of the next one less 0.02px
to work around the limitations of min- and max- prefixes and viewports with > fractional widths.
See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
See https://bugs.webkit.org/show_bug.cgi?id=178261

So they use a precision of 0.02px, it would be something like 0.00125em for us, which is close to the 0.001 proposed by @JasonMiller. I would agree to adopt this constant, still we need to do some tests to ensure that the em-px conversion is correctly made by browsers.

Your Environment

• Foundation version(s) used: develop
• Browser(s) name and version(s): Tested on latest versions of Chrome, Firefox, Safari
• Operating System and version (desktop or mobile): macOS 10.13.5 (beta)

Checklist (all required):

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title is descriptive.
• [x] The template is correctly filled.

[JasonMiller]

I would be tempted to defer to the bootstrap approach -- my assumption is that it will have already been thoroughly tested by that community if it is in production.

[ncoden]

@JasonMiller I agree. I opened a PR with 0.02px for this reason. See #11315.

[JasonMiller]

Awesome, thanks for the quick follow-up!