Twenty Seventeen: Improve front end display in Internet Explorer 8

[adamsilverstein]

Twenty Seventeen "should look okay and be functional" in IE8. We are not aiming for perfect.

I did some testing in Browserstack and noticed several issues I hope we can fix these as they make the theme pretty unusable for ie8 users.

Starting with the home page:

• Site title missing style and at top instead of bottom of page
• Menu located mid-page
• No indication of more content below

Setting a static front page results in that page's content overlapping the home page image:

The menu functions, however I'm getting the mobile menu, and the SVG icons are missing (hamburger bars and close):

Single posts show the full size splash image (not just the header bar), and the content is completely missing (not visible):

Screencast: ​https://cl.ly/2o3n163Q0543

It looks like the issue here is the header background image is covering the entire page content... using ie debug tools i removed the custom-header-image div's background image, revealing the page content below, although the sidebars also appear to be missing in action (removing the image in the customizer also made the content visible in ie8)

Compared to the correct appearance in chrome:

[sami.keijonen]

I can see the same issues. They were not there when I last checked about 4-6 days ago. I'm not sure what have changed after that. Could be IE8 CSS or header image CSS or both.

[sami.keijonen]

With this small IE8 CSS change by removing height most of the issues disappear.

.custom-header-image,
.panel-image {
	max-height: 1000px;
	padding-top: 0;
}

[laurelfulford]

Update IE8 styles.

[laurelfulford]

In 38472.patch​, I added styles that fix the display issues with the header, and get the font sizes a bit more consistent with how it looks like other browsers. The header doesn't look exactly like it does in newer browsers, but it's closer and doesn't affect the site's legibility anymore :)

I also adjusted the vertical spacing overall.

Like Twenty Sixteen, Twenty Seventeen's CSS has the larger screen styles in @media queries, meaning browsers that don't understand @media queries (like IE8) will look more like mobile browsers. This is most noticeable in things like the menu styles and single-column layout. It doesn't affect the theme's usability, though, so I think it should be okay, and saves having to rewrite those styles again for IE8. I've left this bit as is.

IE8 doesn't support SVGs, so it's using the fallback styles for some of the icons. The fallbacks are limited to the absolutely necessary icons - so there is one for the submenu dropdown toggle icon, but not for the little 'hamburger' and X that sit in front of the 'menu' button. I haven't changed the fallback support, but I tried to improve the appearance/placement of the dropdown toggle used in the menu.

It may need a bit more refining - just let me know!

[davidakennedy]

In 38962:

Twenty Seventeen: Improve front end display in Internet Explorer 8

• Fixes the display issues with the header. The header doesn't look exactly like it does in newer browsers, but it's closer.
• Gets the font sizes a bit more consistent with how it looks like other browsers.
• IE8 doesn't support SVGs, so it's using the fallback styles for some of the icons. The fallbacks are limited to the absolutely necessary icons - so there is one for the submenu dropdown toggle icon, but not for the little 'hamburger' and X that sit in front of the 'menu' button.

Props laurelfulford.

Fixes #38472.