WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#38543 closed defect (bug) (fixed)

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

Reported by: peterwilsoncc Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (4)

38543.png (1.3 MB) - added by peterwilsoncc 5 years ago.
38543.diff (884 bytes) - added by afercia 5 years ago.
38543.1.patch (3.0 KB) - added by laurelfulford 5 years ago.
38543.2.patch (1.1 KB) - added by laurelfulford 5 years ago.

Download all attachments as: .zip

Change History (27)

@peterwilsoncc
5 years ago

#1 @afercia
5 years ago

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

#2 follow-up: @theotix
5 years ago

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

Last edited 5 years ago by theotix (previous) (diff)

#3 @LittleBigThing
5 years ago

@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%;
}

#4 @afercia
5 years ago

@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 :)

#5 follow-up: @helen
5 years ago

#38565 was marked as a duplicate.

#6 in reply to: ↑ 5 @Fencer04
5 years ago

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

@afercia
5 years ago

#7 @afercia
5 years ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to davidakennedy
  • Status changed from new to assigned

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.

#8 @Fencer04
5 years ago

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

Last edited 5 years ago by Fencer04 (previous) (diff)

#9 @davidakennedy
5 years ago

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.

This ticket was mentioned in Slack in #core by helen. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-themes by joemcgill. View the logs.


5 years ago

#12 @davidakennedy
5 years ago

#38608 was marked as a duplicate.

#13 @helen
5 years ago

#38621 was marked as a duplicate.

#14 @laurelfulford
5 years ago

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.

#15 in reply to: ↑ 2 @cbgraphics
5 years ago

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)

#16 @afercia
5 years ago

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

#17 @davidakennedy
5 years ago

#38638 was marked as a duplicate.

This ticket was mentioned in Slack in #core by helen. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-themes by helen. View the logs.


5 years ago

#20 @davidakennedy
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#21 @sami.keijonen
5 years ago

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.

Last edited 5 years ago by sami.keijonen (previous) (diff)

#22 @laurelfulford
5 years ago

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.

#23 @davidakennedy
5 years ago

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.

Note: See TracTickets for help on using tickets.