Grid layout issue introduced in Fabric Core 9.6.1 when using hidden classes

[LoganHollins]

A bug has been introduced in Fabric Core 9.6.1 that causes 2 divs to be hidden when using complementary hidden classes, instead of 1 div showing and 1 div being hidden.

Ex.

  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm6 ms-hiddenLgDown">A</div>
    <div class="ms-Grid-col ms-hiddenXlUp">B</div>
  </div>

In version 9.6.0:
If you had this code and had your screen width at 1023px-, the B div would show
If you had this code and had your screen width at 1024px, the B div would show
If you had this code and had your screen width at 1025px+, the A div would show

In version 9.6.1:
If you had this code and had your screen width at 1023px-, the B div would show
If you had this code and had your screen width at 1024px, neither div will show
If you had this code and had your screen width at 1025px+, the A div would show

Codepen highlighting the issue
Version 9.6.0: https://codepen.io/anon/pen/WLorZG
Version 9.6.1: https://codepen.io/anon/pen/bOBEop

[LoganHollins]

It looks like this bug was introduced in this PR: #1133

[mikewheaton]

Thank you for the detailed issue and CodePen repros. I'll take a closer look at this. Until then, you should be fine to use 9.6.0 has it's only missing a small change to the ms-box-shadow() mixin (#1129) that shouldn't affect most apps.

[mikewheaton]

I've been investigating this and don't see a good solution. It turns out that Bootstrap and other frameworks have a similar issue, where a combination of min-width and max-width media queries leads to gaps where no classes are applied. This looks to be why Bootstrap has deprecated their equivalent utilities in favor of display utilities.

I did explore using only min-width, so that there are no gaps between breakpoints. The problem with this is that, for a class like .ms-hiddenSm we have to use display: none by default and then apply display: initial at the medium breakpoint. This works fine in isolation. However, if there's another class on that element setting the display property our styles would effectively unset it. See this CodePen demo.

At this point I'm not seeing any solutions that don't introduce drawbacks. I'll leave it open in case anyone has ideas.