Twenty Seventeen: Firefox 49 renders site name & description off screen.

[peterwilsoncc]

In Firefox 49, the site title & description are positioned off the right of the screen on the home page.

Reported by @mobby2561 in Slack
​https://wordpress.slack.com/archives/design/p1477636474002472

See screen shot.

[afercia]

Removing display: flex; from the container fixes it for me. Seems there's no apparent reason to use flexbox there, maybe a leftover.

[theotix]

add left: 0; in .site-branding (site title and description container in absolute) fixes it for me.

[LittleBigThing]

@afercia should this also be removed (around line 1648)? I thought that flexbox has not made it into the theme.

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding {
    align-self: flex-end;
}

It might probably be best to add left: 0 around line 3243 anyway to have defaults explicitly like this:

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding {
    bottom: 0;
    left: 0;
    padding-top: 0;
    position: absolute;
    width: 100%;
}

[afercia]

@LittleBigThing yep I'd say if this is going to be fixed removing display: flex; from the container then also the flex related declarations on the container children should be removed. Setting left: 0; explicitly shouldn't be necessary (theoretically) but might be safer, just in case. Best person to ask is @davidakennedy :)

[helen]

#38565 was marked as a duplicate.

[Fencer04]

I noticed the same issue happening in IE11 on Windows 10. I submitted a ticket before I saw this one. It is #38608.

[afercia]

38543.diff​ removes the flex box related declarations and adds left: 0, just in case. Tested on Firefox and IE11 solves the issue and seems doesn't break anything. The whole usage of flex box here seems unnecessary to me, unless I'm missing something. Also, seems flex box absolute-positioned children implementation is inconsistent across browsers at the moment.

[Fencer04]

I tested the patch and can confirm it's working on IE11 on Windows 10.

[davidakennedy]

I tested the fix for both Firefox and IE 11 and it looks good.

I believe the Flexbox stuff for the header is leftover from the theme before it had video headers. It's cruft and can be removed. @laurelfulford can test and confirm first though.

[davidakennedy]

#38608 was marked as a duplicate.

[helen]

#38621 was marked as a duplicate.

[laurelfulford]

It looks like the original CSS was still needed for the mobile front page header, so I made some updates in 38543.1.patch​ to make sure the layout stays the same.

[cbgraphics]

Replying to theotix:

add left: 0; in .site-branding (site title and description container in absolute) fixes it for me.

this worked for me too.
(firefox mac os 10)

[afercia]

Ah, I've missed the mobile view and the transition on the bottom margin. Neat :)

[davidakennedy]

#38638 was marked as a duplicate.

[davidakennedy]

In 39124:

Twenty Seventeen: Fix site name and description appearing off screen in some browsers

• Occurred in Firefox and IE 11.
• Removes Flexbox in favor of more well-supported display: table; layout technique.
• Maintains consistent layout on smaller screens.

Props laurelfulford.

Fixes #38543.

[sami.keijonen]

Was just about to say that this works. But in Firefox on narrow screens header doesn't seem to respect min-height: 75vh;. Header is not that height. Not sure if it's important, or how much mobile devices use Firefox.

[laurelfulford]

Good catch @sami.keijonen! Have fixed in 38543.2.patch​.

This also addresses an issue with the 'overflow: hidden' on the .site-header; it was added to prevent a side-scrolling issue, but was a bit heavy handed and ended up cutting off the menu. It looks like the cause of the side-scroll was related to how the scroll down icon was rotated, so I've addressed it there instead.

[davidakennedy]

In 39129:

Twenty Seventeen: Correct issues with hidden overflow and height on site header

In -r39124, some additional issues were introduced:

• The 'overflow: hidden' on the .site-header; was added to prevent a side-scrolling issue, but it ended up cutting off the menu. It looks like the cause of the side-scroll was related to how the scroll down icon was rotated, so it's addressed by rotating the icon and not the <a>.
• Also, min-height doesn't play well with display: table; in Firefox. So it's addressed with just height.

Props laurelfulford, sami.keijonen.

See #38543.