Wrong overriding between media queries
ColbeSebastien opened this issue · 1 comments
Hello, I'm on Google Chrome v70 and I noticed that when I load this:
.h7 {
@include poly-fluid-sizing('font-size', (320px: 22px, 992px: 40px));
}
I got this:
.h7 {
font-size: 22px;
}
@media (min-width: 320px) {
.h7 {font-size: calc(2.67857vw + 13.42857px);
}
@media (min-width: 992px) {
.h7 {font-size: 40px;
}
But when my screen is greater than 992px, the first media query overrides the second.
It would fix everything to generate something like this:
.h7 {
font-size: 22px;
}
@media (min-width: 320px) and (max-width: 991.98px) {
.h7 {font-size: calc(2.67857vw + 13.42857px);
}
@media (min-width: 992px) {
.h7 {font-size: 40px;
}
EDIT : I did it for myself, I share it:
In your mixin poly-fluid-sizing, just replace this:
// Interpolated size through breakpoints
@for $i from 1 through ($length - 1) {
@media (min-width: nth($keys, $i)) {
$value1: map-get($map, nth($keys, $i));
$value2: map-get($map, nth($keys, ($i + 1)));
// If values are not equal, perform linear interpolation
@if ($value1 !=$value2) {
#{$property}: linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i+1)): $value2));
}
@else {
#{$property}: $value1;
}
}
}
By this:
// Interpolated size through breakpoints
@for $i from 1 through ($length - 1) {
$value1: map-get($map, nth($keys, $i));
$value2: map-get($map, nth($keys, ($i + 1)));
@media (min-width: nth($keys, $i)) and (max-width: (nth($keys, ($i + 1))-0.02) )
{
#{$property}: linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i+1)): $value2));
}
}
Okay, so I'm not seeing this behavior in Chrome v70 on Windows. I created this test pen:
https://codepen.io/jakobud/pen/QJxrga
So at 991px wide I see this:
And at 992px (and above) I see this:
So that appears to be the correct behavior.
If Chrome was actually prioritizing the 320px media query over the 992px media query when the viewport width was wider than 992px, then that would be absolute incorrect behavior on Chrome's part and I think someone would have definitely noticed that behavior. Do you have any sort of test pen or jsfiddle that shows the behavior you are experiencing?
Thanks,