Weird behaviour at 767px exactly

[Dinuz]

@mdo I am having a real weird issue with the whole bootstrap grid system.

The behaviour of the framework is great everywhere, except at a specific point (the 767px). Here apparently it doesn't know what it need to do (or I am probably doing something really wrong).

I need to say that I am testing the outcome using https://addons.mozilla.org/en-us/firefox/addon/toggleresponsive/?src=cb-dl-recentlyadded in firefox, to see the results directly on screen.

Let's consider a simple example to understand what I am finding, and maybe understand also if I am doing something wrong:

I have a div, and I use the following media query to change the background color for every breakpoint:

.colordiv {
    background-color: orange;

    //@include breakpoint($xs) {

    //}

     @include breakpoint($sm) {
          background-color: yellow;
      }

      @include breakpoint($md) {
           background-color: pink;
       }

      @include breakpoint($lg) {
           background-color: red;
      }
  }

where the breakpoint are the default breakpoints of bootstrap(I use a routine in sass to build up the @media{}, and don't repeat it):

$xs: (max: $screen-xs-max);
$sm: (min: $screen-sm-min);
$md: (min: $screen-md-min);
$lg: (min: $screen-lg-min);

Now if I don't target $xs, everything works fine, and at 767 my div change color from yellow($sm) to orange. Instead if I target $xs in the following way (note I moved the background-color orange inside of the media query for $xs):

.colordiv {

    @include breakpoint($xs) {
        background-color: orange;
    }

     @include breakpoint($sm) {
          background-color: yellow;
      }

      @include breakpoint($md) {
           background-color: pink;
       }

      @include breakpoint($lg) {
           background-color: red;
      }
  }

What happen is that everything works fine at each breakpoint the color is correctly changed, except, and this is the weird thing, at exactly 767px, i don't get any color.
At 766px the div becomes orange, and at 768px it becomes yellow, but at 767px it doesn't have any color.
To me seems that the 767px point doesn't know what it needs to do, and it's considered not $xs and not $sm.

Doing some other testing I also discovered that if I change my media breakpoints, to include a maximum, the same weird behaviour happen on every breakpoint limits (meaning at 1199px for$ md, at 991px for $sm) - the div doesn't have any color at exactly the breakpoint change:

$xs: (max: $screen-xs-max);
$sm: (min: $screen-sm-min, max: $screen-sm-max);
$md: (min: $screen-md-min, max: $screen-md-max);
$lg: (min: $screen-lg-min);

What this means? If I have a min and a max, the framework doesn't know what to do at the max point of each breakpoint?

I mean I get a div without color at exactly $screen-xs-max, $screen-sm-max, $screen-md-max.

I can get correct results (like in the first scenarios), removing the max for the $sm and the $md, but I cannot remove the max for the $xs, otherwise I will not have an $xs breakpoint, and in this case I still encounter the weird issue at 767px.

I want to have a breakpoint $xs, because I need to target it specifically with js, but I cannot afford to have a weird things like the one that I explained above.

Do you have any idea of what is going on here?

Thanks so much, I really appreciate any help.

Best
Dinuz

[cvrebert]

@Dinuz What OS did you test on? Have you tried testing with Firefox's built-in Responsive Design View? (It's possible the extension you used might have some minor bug.)

I can get correct results (like in the first scenarios), removing the max for the $sm and the $md, but I cannot remove the max for the $xs, otherwise I will not have an $xs breakpoint

I'm not clear on what you mean by "I will not have an $xs breakpoint" here. The "only use min-width media queries" approach is workable in most cases.

I want to have a breakpoint $xs, because I need to target it specifically with js

I don't see how that necessitates using max-width media queries.

[cvrebert]

Closing for now, due to lack of response.