[IE11] Wrong Result if used with CSS Grid Layout

ausi / cq-prolyfill

Prolyfill for CSS Container Queries

https://au.si/css-container-element-queries

MIT License

567 stars 39 forks source link

[IE11] Wrong Result if used with CSS Grid Layout #55

Open gisu opened 6 years ago

gisu commented 6 years ago

Currently I use CSS Grids in combination with the Prolyfill. IE10 - Edge 15 in the old CSS specification. The problem is that the Polyfill behaves incorrectly with elements within the CSS grid layout. IE10 to Edge 15 simply trigger the conditions, it looks like the Polyfill uses the dimensions of the container outside the CSS grid.

If I switch to Flexbox for testing, the Prolyfill behaves regularly.

ausi commented 6 years ago

CSS grid layout is currently not fully supported, see #11

Can you provide a reduced test case of your usage?

gisu commented 6 years ago

On Edge, Chrome, Safari, Firefox this works without problems. Only IE11 causes problems. Example I have attached unfortunately denied codepen as well as the codesandbox the service at IE11.

In the example, a component is embedded in a grid box.

https://codesandbox.io/s/k2pyrm353o