GHC 2019-11-19

2 comments.

, https://git.io/JeKPm in Requarks/wiki
Just implemented a fix (#1233).

, https://git.io/JeKPY in Requarks/wiki
Fix wrong page title positioning in Safari
==========================================

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:

```html
<!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.