fix(list): fix compatibility with IE11 #7573
Conversation
* Added a mixin / workaround for the flexbox bug for Internet Explorer 11. Fixes angular#7557.
devversion
added
needs: review
| &::before { | ||
| content: ''; | ||
| min-height: $min-height; | ||
| visibility: hidden; |
There was a problem hiding this comment.
What element is this hiding?
There was a problem hiding this comment.
The pseudo element, which sets our height. This is our actual workaround. IE11 now thinks, that the actual button container has a fixed height, but behind the scenes (::before pseudo) it still has a min-height.
There was a problem hiding this comment.
Notice that we have a /core/services/layout/ie_fixes.css. These are appended to the /dist/angular-material.css contents as raw css.
Perhaps we should add this ^^ (as CSS instead of scss) to that file?
There was a problem hiding this comment.
Oh, I don't think that's a good idea. It should be located in the list component, since the component can be exported as a (Closure)-/ Module.
In addition to that, it will require much modifying, whenever we change a height of the list.
Imagine, I need to export four fixed CSS selectors, which have a min-height property, which should be easy to change.
Also it's not really an IE fix, it's rather a workaround.
The most common problems in the list component are now fixed, so the only missing fix for now is the compatibility with IE11. So that means we should test this thoroughly.
PS: I decided, not to make this mixin generic, because the use-cases for the
min-heightflexbug are really rarely.Fixes #7557.
@ThomasBurleson Please take a look as well.