Foundation-sites: incorrect Foundation.MediaQuery results

[DanielRuf]

Not sure why but the results seem incorrect.

https://codepen.io/DanielRuf/pen/JLBjBy

[denisahac]

Upon doing a self investigation to the MediaQuery, it turns out that the atLeast call on the is function is the suspect of the unwanted results.

Check these out:

1. Foundation.MediaQuery.get('small'); // only screen and (min-width: 0em)
2. Foundation.MediaQuery.get('medium'); // only screen and (min-width: 40em)

So, calling is('small') when you're on large screen results to true, because of the min-width, this is also true on is('medium').

Since Foundation is built with mobile first on mind, the only workaround for this is make an atMost function that replaces the atLeast call on is function and change min-width text to max-width inside the atMost function before performing a media query tests.

[SassNinja]

@DanielRuf what exactly looks incorrect to you?

On large viewport the following is 100% correct and expected imo

Foundation.MediaQuery.is('small only') -> false
Foundation.MediaQuery.is('small') -> true
Foundation.MediaQuery.is('medium') -> true

But agree this is incorrect

Foundation.MediaQuery.is('small down') -> true
Foundation.MediaQuery.is('medium down') -> true

[DanielRuf]

The results are not the expected results.

[SassNinja]

You mean Foundation.MediaQuery.is('small') shouldn't return true on large viewport?

[DanielRuf]

You mean Foundation.MediaQuery.is('small') shouldn't return true on large viewport?

No, your other finding:

But agree this is incorrect

Foundation.MediaQuery.is('small down') -> true
Foundation.MediaQuery.is('medium down') -> true

[DanielRuf]

https://codepen.io/DanielRuf/pen/ejmgpg

The results are still wrong, medium down also fires on medium and up.

[DanielRuf]

We should write some unit tests to catch this one and solve this.

[ncoden]

The MediaQuery plugin only suppor the breakpoint only modifier and ignore all others, this is why it returns the wrong result for small down, as it process it like small.

A bug is not to throw an error when down is passed.
And the missing feature is not supporting down,

[RvWensen]

The MediaQuery plugin only suppor the breakpoint only modifier and ignore all others, this is why it returns the wrong result for small down, as it process it like small.

A bug is not to throw an error when down is passed.
And the missing feature is not supporting down,

Even that is not working: https://codepen.io/rvwensen/pen/QoVRKx?editors=1111

[DanielRuf]

@RvWensen please check the browser console.

Foundation.MediaQuery.is is not a function

[DanielRuf]

https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js

6.0.5 is a bit old ;-)

[RvWensen]

@DanielRuf Tnx for you quick response, well thats a stupid mistake. Sorry for that!

i updated the Pen, https://codepen.io/rvwensen/pen/QoVRKx?editors=1111 but now it say's its small all the time :)

[DanielRuf]

i updated the Pen, codepen.io/rvwensen/pen/QoVRKx?editors=1111 but now it say's its small all the time :)

Because small is small and upwards.

[DanielRuf]

See https://github.com/zurb/foundation-sites/issues/11122#issuecomment-385324375

[RvWensen]

Ok, i think it's time for a cup of coffee ...