Search code examples
htmlcsscss-positioninternet-explorer-11css-grid

IE11 ignores absolute item content width when centering in grid

So I have a fixed position css-grid with height/width:100%.

I want that its items won't affect the cell size so I use position absolute on the children of the grid.

The problem is that when I use -ms-grid-column-align/-ms-grid-row-align (it's the same as justify-self/align-self in modern browsers) end\center doesn't really work because IE ignores the element size when positioning them so

center === (absolute, top:50VH, left:50VW)

end === (absolute, top:100VH, left:100VW)

Can you think of any other way to fix its position? I can't use transform since it's being used for other properties which I have no control over.

Fiddle - https://codesandbox.io/s/ie11-grid-bug-vgc6k

Chrome: Chrome Layout

IE11: IE11 Layout

Solution

  • Sadly, IE11 doesn't take into account items content size when the item position is static.

    So any properties (in CssGrid and flex) that are depending on that doesn't work as supposed.

    My solution since I couldn't change the item's transform property and I had to use absolute, was to add a wrapper for the item and use transform: translate.