Umami support for Internet Explorer 11

We reviewed IE11 in our weekly call yesterday, and @markconroy has updated the initial issue with the full list of issues we found.

Here's the screenshots:

* Main menu links not displayed + Search icon missing:

* Text in banner at top of the image, not centred vertically:

* Recipe icons are collapsing together:

* Homepage promoted articles:

* Frontpage recipes flexbox not working:

* Articles list page not flexing:

* Article node: Main page content is very wide & sidebar is off-screen:

Starting to work on this at #FLDC18

starting to work on this @florida drupal camp 2018 #fldc18

This patch fixes the header for the site in IE11.

1. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
   @@ -82,6 +83,16 @@
   +@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
   

   This media query will target only IE10 (which doesn't matter) and IE11 browsers.

2. +++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
   @@ -82,6 +83,16 @@
   +    background-image: url(../../../../images/png/search.png);
   

   I tried for hours to get IE11 to play nicely with this SVG background image and was unsuccessful. So, instead we're loading a PNG.

3. +++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
   @@ -75,7 +75,7 @@
   +    max-height: none;
   

   IE11 does not support "initial". Setting to none, which is the initial value.

4. +++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
   @@ -111,7 +111,9 @@
   +    flex-grow: 0;
   

   Ie11 does not support CSS calc within flexbox shorthand. Writing it out works around the bug.

5. +++ b/core/profiles/demo_umami/themes/umami/logo.svg
   @@ -1,5 +1,5 @@
   +<svg width="205px" height="60px" viewBox="0 0 711 206" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   

   IE11 handles SVGs like 💩. Specifying the correct width/height here fixes it and does not impact other browsers.

This fixes the recipe node types layout issues in IE11

1. +++ b/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
   @@ -36,7 +36,8 @@
   +  flex: 0 0 auto;
   

   IE11 does not handle the calc in flexbox shorthand https://github.com/philipwalton/flexbugs#flexbug-8

2. +++ b/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
   @@ -169,6 +171,7 @@
   +    max-width: 33%; /* fixed IE11 bug */
   

   IE11 has issues with flex children having padding so they need the max-widths restated https://github.com/philipwalton/flexbugs/issues/3

This fixes the homepage banner vertical centering issue in IE💩11

crap. that includes the previous patch. This patch is the vertical centering issue fix only,

Created patch for IE11 issue where on the homepage the Recipes take up full width.
This is because of an IE11 Flexbox issue where it ignores shorthand calc.
To fix this you need to write out the calc out under "flex-basis" instead of in flex.

So changes from
flex: 0 0 calc(50% - 28px);
to

flex: 0 0; 
flex-basis:  calc(50% - 28px);

In IE11 the columns under the banner are stretched and very long. First "carrot" column is fixed by adding a height value to it. (height 0 removes background color, so added height: 100%)

Uploading combined patch that includes all previous patches.

@andrewmacpherson great point. The correct way to do this would be to modify the SVG... which I wasn't able to do (at least while sprinting). I'll mess with it today to see if I can get it working now that I'm back at my regular workspace.

Attached is a patch that edits the search SVG icon to work in all browsers including IE. So, we do not need the PNG anymore.

So, this is where the last patch is at in IE11. You can see that we have the header, search icon, nav, and some frontpage views fixed.

The middle stretched frontpage view is a complete pain-in-the-💩, and I haven't been able to figure that out yet.

Adding the same IE11 flexbox calc shorthand fixes for the grids

Ignore patch in comment #22 had a copy and paste error. Corrected patch attached.

I've got the stretched homepage view fixed locally, and I'm pretty sure it's the same issue as the articles listing page.

I'll get that, and anything else I can from the list, done this afternoon and post a patch later.

@tomphippen Nice! I wasn't able to find a solution to that short of 1) specifying an arbitrary height, or 2) modifying the templates markup.

@mherchel I've sort of gone for 1, but with a height based on a mixture of the viewport width & the grid layout it's in.
It's not a perfect solution but I think it's good enough & keeps it the same across browsers rather than doing something clever.

I've got my patch attached, it's my first drupal patch so I'm hoping I've got it right, it should include

- All the previous patches
- A fix to the height of the logo in IE11 on Windows 7 (which acts in a different way to other versions)
- Setting flex-basis on node--view-mode-highlighted-small .node__content as described above to stop the heights going crazy on the article, recipe & taxonomy pages
- Adding flex-basis and a couple of other tweaks to fix the same issue on the frontpage view
- Fixed the sidebar issue

I do need to do a thorough cross browser test in Firefox and Edge to make sure these fixes haven't caused regressions elsewhere, will do that tomorrow.

Awesome. You might want to consider limiting the arbitrary height to IE11. My thought is that if the person demoing the profile modifies the view, the arbitrary height will probably become invalid. Limiting it to IE11 could mitigate this. https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

Just a thought :)

That's a good point I hadn't considered.

The good news is I don't think it'll be an issue in this case. As those columns are using flexbox with the flex-direction set to column the height is being set with flex-basis, which means decent browsers will correctly increase it. It does break in IE11, but would do the same if the code was just targeted at it.

So I'd still argue sticking with the same code for all browsers is the least bad option (especially with @andrewmacpherson's note on targeting IE with that media query). I've attached a screenshot of how Safari & IE11 handle a very tall image being used, Chrome & Edge work in the same way as Safari.

After applying patch #28 catched bug with sidebar items broken because of flex-basis property.
https://gyazo.com/fdd934bb70261d459eecf1462cac0427

Added interdiff between #28 and #20

Bottom recipe title lost good alignment: https://gyazo.com/5c5166d1e21db4411f377915ad852865

Suggested patch based on #20 because #28 contains some fixed values for flex bases which not needed imho. Image style may be changed. or image may be absent.
Contains all fixes, include grids. Please review.

This CSS looks good to me and we've reviewed this as part of this week's OOTB meeting. @smaz about to follow up with his review.

Ok, fresh review - I think this is good to go! Thanks everyone!

I've taken before & after screenshots of everything I reported in my initial post, and can confirm everything looks fine now. I've also had @kjay review the CSS, as that's his area of expertees :)

(Sorry, screenshots aren't amazing - smaller screen this time :( )

1, 2 & 12:
main menu links are not displayed - major usability bug
logo image is stretched vertically
Search block - icon missing

Before:

After:

3: Text in banner is at top of image, rather than midway down

Before:

After:

4: Promoted Articles heights are equal but not correct

Before:

After:

5: Frontpage view flexbox is not working (probably just need to add in a prefix ms-flex

Before:

After:

6: Articles listing page - flexbox is not working

Before:

After:

7: Article node - is sidebar working

Before:

After:

8 & 9:
Recipe node - same issue with sidebar
icons and text are squashed on top of each other

Before:

After:

10: Recipe node - ingredients and instructions flexbox is not working
Before:

After:

11: Taxonomy term page - flexbox not working
Before:

After:

Adding credit to @kjay for the review + testing this with me.

Setting this back to Needs Review, just so we can check that these great fixes for IE11 don't break current versions of Chrome/Firefox/etc.

Hi,

I've given this patch a test in the latest versions of Chrome and Firefox and everything still seems to work as expected. Checked in it IE11 and everything is as the screenshots suggest it is. Bravo!!!

RTBC again.

Yay superb, thanks. The changes look fine to me as well.

Adding credit from issue marked as duplicate to this #2943630: Umami theme: Safari 9.1 issues