0

So, I was working on making my webshop IE and Edge ready an stumbled on the following problem in IE: my background would not y-repeat and would only take the height (as it seemed) of the screen. After stackoverflowing my question (because I assumed it was pure a HTML/CSS + IE issue), someone mentioned something about setting the height of my page-wrapper to auto. When I did this, it still not worked while it worked for him in IE. So, digging into the code, I saw that Magento created a .ie10 and .ie11 class to my page-wrapper with only the following style: height: 100%. I overwrote the style with height: auto and now everything works fine.

My question is: why does this happen in Magento 2 and what is the reason that the style height: 100% is applied to it?

Improve this question

1 Answer 1

Reset to default
1

I suspect that height: 100%; was added as Internet Explorer does not honour min-height when combined with flexbox, see here for more info on that.

If you don't want to use flexbox it can be disabled by setting the @use-flex variable to false in lib/web/css/source/lib/variables/_responsive.less:10 (copying the file into your theme).

Improve this answer
4
  • But the page-wrapper does not have flex assigned to it. I couldn't figure out even if they mean that a child has flex style assigned to it?
    – Condor
    Mar 8, 2018 at 9:52
  • It does, look at vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less:284. It uses two mixins to apply the flex properties .lib-vendor-prefix-display(flex); and .lib-vendor-prefix-flex-direction(column);. Or at least in 2.1, I presume it's still there in 2.2. If not then it's likely they left the min-height in by mistake?
    – Ben Crook
    Mar 8, 2018 at 10:42
  • 1
    Ah okay, then that would be the problem. I can't blame them, it's just Internet Explorer that sucks so bad.
    – Condor
    Mar 8, 2018 at 11:04
  • 1
    Yeah, Magento 2 was initially released with IE9+ support but after this issue was raised they changed support to IE11+ so the IE10 class is legacy code anyway.
    – Ben Crook
    Mar 8, 2018 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.