fix .grid class column-count var taking precedence in safari

[nickschot]

In Safari it seems that in certain situations the --column-count: 1; from the .grid class takes precedence over the media query ones. As the responsive classes can't be used without the main .grid classes anyway this PR should prevent that from happening.

[ijlee2]

Hi, @nickschot. I think your pull request may unblock a PR in ember-website. Can you rebase your branch to see if the CI will pass?

[ijlee2]

@nickschot Thank you!

[mansona]

Oh yes I forgot to comment on this when we discussed it in the Website Redesign meeting. I don't really know if this is the right solution 🤔

If this is a safari bug I would like to have a bit more information on it before we commit this to the repo and add what seems like an unnecessary selector to the CSS

[nickschot]

Oh yes I forgot to comment on this when we discussed it in the Website Redesign meeting. I don't really know if this is the right solution 🤔

If this is a safari bug I would like to have a bit more information on it before we commit this to the repo and add what seems like an unnecessary selector to the CSS

We'll at the very least need to verify if the selectors appear in the correct order in the compiled CSS. But in my memory I think that was the case, hence why it was only happening in Safari for whatever reason.

[ijlee2]

It's happening in Chrome too: ember-learn/ember-website#807

[mansona]

@ijlee2 if it's really different with a trailing slash or not (omg 😱) then that is actually solved with a different fix in the website repo 👍

[mansona]

As it turns out I didn't say what the "different fix" in the website repo website actually was 🙈 Now that ember-learn/ember-website#809 is merged it should potentially be fixed

can we double check and see if its still a problem @nickschot ?

[jenweber]

Notes from learning team meeting - this requires fixes upstream. Media queries with the same queries get squashed into one media query, and this reordering causes specificity problems.