Skip to content

Fix wrong page title positioning in Safari - #1233

Merged
NGPixel merged 1 commit into
requarks:masterfrom
zmwangx:fix-safari-title-positioning
Nov 19, 2019
Merged

Fix wrong page title positioning in Safari#1233
NGPixel merged 1 commit into
requarks:masterfrom
zmwangx:fix-safari-title-positioning

Conversation

@zmwangx

@zmwangx zmwangx commented Nov 19, 2019 •
edited
Loading

Copy link
Copy Markdown
Contributor

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
jionggyu pushed a commit to jionggyu/wiki-2.5.302-patch that referenced this pull request Jul 9, 2024
@zmwangx @NGPixel
fix: wrong page title positioning in Safari (requarks#1233)
7730e6a 
Fixes requarks#1221.
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