CODEWITHSUNDEEP
htmlcsscss-positioninternet-explorer-11css-grid
Haim Houri
Haim Houri

Reputation: 261

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

Upvotes: 0

Views: 284

Answers (2)

Haim Houri
Haim Houri

Reputation: 261

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.

Upvotes: 0

Yu Zhou
Yu Zhou

Reputation: 12999

You could delete position: absolute; in #cell and #cell2. Without the properties, the images will show well in IE. But in this case, the center cell will disappear in Chrome, so we need to add a css property only works in Chrome:

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
    #cell2 { position: absolute; } 
}

After these modifications, the images will show well in both IE and Chrome.

Upvotes: 0

Related Questions