Media Queries broken breakpoints [decimals of a pixel]

[tom-daly]

related to Media Queries broken breakpoints #929 that was closed.

I believe that I am experiencing the same issue. There is a gap where both ms-hiddenMdUp and ms-hiddenSm show. This happens at every single other breakpoint when it falls in the decimal of a pixel range. I'm using ms-hiddenMdUp and ms-hiddenSm so I only see it a few times.

@media (max-width: 479px)

<style>…</style>

.ms-hiddenLgDown, .ms-hiddenMdDown, .ms-hiddenSm, .ms-hiddenXlDown, .ms-hiddenXxlDown {
display: none!important;
}

The gap is within the decimal of a pixel. So in chrome I'm measuring 479.091px .... that technically is between 479 < 479.091 < 480...

media (max-width: 639px) and (min-width: 480px)

<style>…</style>

.ms-hiddenLgDown, .ms-hiddenMd, .ms-hiddenMdDown, .ms-hiddenMdUp, .ms-hiddenXlDown, .ms-hiddenXxlDown {
display: none!important;
}

[mikewheaton]

Thank you for the detailed report and repro, @tom-daly.

I found an article that identifies the same issue. The simplest fix in our case is likely to update the media queries to use values like 639.999px, so that the gap between that and 640px is very small and unlikely to be hit.

[tom-daly]

I've never had one of my bugs fixed before so thank you, you made my day