Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix wrong page title positioning in Safari #1233

Merged
merged 1 commit into from Nov 19, 2019
Merged

Fix wrong page title positioning in Safari #1233

merged 1 commit into from Nov 19, 2019

Conversation

zmwangx
Copy link
Contributor

@zmwangx zmwangx commented Nov 19, 2019 •
edited

Fixes #1221.

The issue boils down to a peculiar difference in flex behavior in Safari vs Chrome/Firefox. I distilled the code down to this snippet:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .outer {
        height: 90px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        background: red;
      }

      .inner {
        /* When vertical margins are not set to auto, .inner grows to the fill .outer in Safari,
           whereas in Chrome/Firefox .inner shrinkwraps its contents. */
        /* margin: auto 0; */
        flex-grow: 1;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div>Line 1.</div>
        <div>Line 2.</div>
      </div>
    </div>
  </body>
</html>

Test page: https://gitcdn.xyz/cdn/zmwangx/fa93c33e1e8cb9e83cd494bc39e3c9a1/raw/97c1e6d23473514811a3703e034b24a13d81f19e/flex.html

In Chrome/Firefox, the inner wrapper shrinkwraps its contents and is vertically centered; in Safari, the inner wrapper fills the outer wrapper, but since it's display: block, content starts at the beginning, hence not centered. I'm not a CSS expert so can't explain why there's this difference and who's behavior is correct (or if the spec is simply ambiguous here). However, setting vertical margins of the inner wrapper to auto instead of 0 does fix the problem.

@zmwangx zmwangx marked this pull request as ready for review November 19, 2019 10:44
@auto-assign auto-assign bot requested a review from NGPixel November 19, 2019 10:44
@zmwangx zmwangx mentioned this pull request Nov 19, 2019
Closed
@NGPixel NGPixel merged commit b19fb2a into requarks:master Nov 19, 2019
@zmwangx zmwangx deleted the fix-safari-title-positioning branch November 19, 2019 18:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@NGPixel NGPixel NGPixel approved these changes

Assignees

@NGPixel NGPixel

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Page titles positioned wrong on Safari
2 participants
@zmwangx @NGPixel