Multiple attribute selectors in IE 11 not working

leevking commented 4 years ago

Hi, I met some problems using min-width and min-height selectors simultaneously. Here is the peace of code.

@for $i from 0 through 11 {
    $x: $i * 25;

    section[min-height~="#{($x + 100) * 1px}"][min-width~="#{($x) * 1px}"] {

            border-width: $i * 1px;
            border-top: none;

            header {
                font-size: round($i * 2.2) * 1px + 8px;
                padding: $i * 1px + 4px;
            }
    }
}

This works fine in Chrome and Mozilla but in IE 11 seems to have some problems. It takes only the last selector (min-width in this case) and transforms to something like this(image below). Any ideas whats wrong or how to fix this?

I am using css-element-queries v1.2.2

marcj commented 4 years ago

What is the actual generated CSS? Please post the plain css here. If you can provide a JSFiddle/Stackblitz or something what would be even greater.

leevking commented 4 years ago

Hi, sorry for a long response, just got time to create a reproduction. In this demo div blocks should react to both width and height (simultaneously) change and change font-size depending on its values.

https://stackblitz.com/edit/css-element-queries-edge-test

Tried this at Microsoft Edge (I haven`t updated it yet), still not working. But in Mozilla everything works as expected. Check this out please.

marcj / css-element-queries

Multiple attribute selectors in IE 11 not working #287