Had a customer reporting this, not really a big problem but could perhaps be a problem for some.
See the screenshot for an example.
The use of display: grid is perhaps not the best way of doing this ATM while IE11 and EDGE do not really support this.
Otherwise use @supports in css and provide a fallback for IE11 and EDGE
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | summary-layout-fixes-for-IE-2906170-6.patch | 8.94 KB | pivica |
| #6 | 2906170-IE11-mobile.png | 27.33 KB | pivica |
| #6 | 2906170-IE11-tablet.png | 33.16 KB | pivica |
| #6 | 2906170-IE11-wide.png | 43.09 KB | pivica |
| #4 | replace_grid_with_flexbox_for_ie_compat.patch | 3.59 KB | yobottehg |
Comments
Comment #2
miro_dietikerYeah, we should be nice to Browsers as they are usually nice to us too... ;-)
Any chance you provide a fix?
Comment #3
yobottehg commentedComment #4
yobottehg commentedReplaced the
display: gridsection with flexbox. Its better for aligning items left to right then grid and has IE11 support.Comment #5
alexej_d commented@yobottehg There are several places in your patch which have flex-basis set to auto via declarations like that
flex: x x auto;only to set the basis of the same element to a different percentage viaflex-basis: xx%;one or a few rows further down. Is this intended? Why not writeflex: x x xx%;directly?Comment #6
pivica commentedHi all.
There was a reason why we converted from flexbox layout to grid layout - we need to support 2D layout for small screens where the summary is going to the second line and is expanding fully horizontally. Check #2868225-30: UI for mobile devices is not looking nice for more details about this and mobile screenshots.
So patch in comment #4 is not good because it is breaking our mobile UI - we have everything again in one line and that is something we do not want.
It is possible to achieve two rows layout on small screens in various ways but CSS grid is definitely the best option for this kind of things and flexbox layout is good for one-dimensional layouts.
Yes, CSS grid is maybe a bit new thingy but it is actually supported by IE10+ http://caniuse.com/#feat=css-grid at least it supports enough stuff that we need ;).
But it seems that PostCSS autoprefixer plugin that we are using is not supporting fully transformations of all grid attributes, especially it is missing support for -ms-grid-column and -ms-grid-column-span. Also, it seems IE does not like 0fr dimensions and we should use auto there. Because of this grid layout is not working in IE.
Here is a new patch, CSS grid based that is fixing IE problems and also updating all gulp packages that we are using to latest versions - because of this and updated autoprefixer there are some smaller changes in other CSS files which are fine.
And here are screenshots how UI looks now in IE11:
Wide
Tablet
Mobile
Note that we can not fix vertical alignment to be centred because IE does not support that attribute in CSS grid. I've also checked IE Edge version and it also looks fine.
Comment #8
miro_dietikerCommitting this improvement. More testing and feedback appreciated.