This is a hard problem to explain, but I'll try to be as thorough and clear as I can. If you need more information or clarification just ask.

I have a field that uses Picture to format it's display. I defined a group of "breakpoints" or media queries for the field which included these two:

(max-width: 480px)
(max-width: 767px)

In CSS these two media queries work so that at a screen size of 480px or less, both are matched but the 480px query's styles override those of the 767px query's. In picturefill.js, however, 767px is used and 480px is ignored entirely. This is because of the following code:

        // See which sources match.
        for (var j = 0, jl = sources.length; j < jl; j++ ) {
          var media = sources[j].getAttribute('data-media');

          // If there's no media specified or the media query matches, add it.
          if (!media || (w.matchMedia && w.matchMedia(media).matches)) {
            matches.push(sources[j]);
          }
        }

        if (matches.length) {
          // Grab the most appropriate (last) match.
          var match = matches.pop();

The "for" loop is taking each of the source span elements with matching media queries and putting them in an array. Because the span containing the 767px query comes after the span containing the 480px query in the markup, it does the same in the array. Then inside the "if" statement the match is selected by taking the last item in the array. Here's where we get the problem: If the screen size is at or below 480px, it still selects the 767px span since it is after the 480px span in the array. The expected behavior would be for the 480px query to override the 767px query since it is more specific to the current screen size.

This was easily solved for by altering my media queries to be the following:

(max-width: 480px)
(min-width: 481px) and (max-width: 767px)

Even though there was an easy work-around in my case, it took some digging for me to figure out which may be difficult for people who don't know how to debug javascript. I suggest either figuring out a way to fix this behavior or just adding an explanation of the behavior in the documentation.

Comments

attiks’s picture

Component:Code» Documentation
Category:bug» support

You have to take care will writing your media queries, we tried implementing a way to validate and interpret the media queries, but it isn't easy to cover all cases.

As far as I can tell, most people use min-width queries, so in your case you'll have

min-width: 0px
min-width: 481px
min-width: 768px
ShaunDychko’s picture

You also have to be careful about the order of the breakpoints in your theme .info file, being sure to write them from smallest to largest targeted browser width. This part of the code

          // Grab the most appropriate (last) match.
          var match = matches.pop();

shows that the last match will be chosen, even if it's not the most appropriate one.

chasingmaxwell’s picture

Category:support» feature

I don't think this issue ought to be labeled a "support request" since I understand how to solve the problem. My point is that one of two things ought to be done:

Either

1) The logic in the code ought to be altered so that media queries behave the way you would expect them to in CSS (I understand that this is probably unnecessary work with little benefit. Probably not worth it).

or

2) This issue ought to be made clear in the documentation so that people don't waste hours trying to figure out why their media queries aren't being respected. I was able to figure out why it wasn't working for me by debugging javascript. There are probably others who would not think to do that or even understand how. Seems like a good idea to put something in the documentation about it.

attiks’s picture

Project:Picture» Breakpoints
Version:7.x-1.1» 7.x-1.x-dev
Category:feature» support

I added a warning to http://drupal.org/node/1904690

Moving to breakpoints issue queue,, since this is more appropriate.

chasingmaxwell’s picture

Since the code that causes the issue is in the Picture module in picturefill/picturefill.js, it seems more fitting that the documentation (and issue) would apply to the Picture module. Is there something I'm missing?

attiks’s picture

Status:Active» Fixed

Added a warning to both picture and resp_img project page, linking to the documentation of breakpoints.

There are/might be other modules using breakpoints, of them will face the same problem.

chasingmaxwell’s picture

Makes sense. Thank you.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.