Change the flex-direction value to column in Safari and the first flex-item covers the page

Sample:

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

body:hover {
  flex-direction: column;
}

div {
  flex: 1;
}

div#tan {
  background: tan;
}

div#teal {
  background: teal;
}
<div id="tan"></div>
<div id="teal"></div>

DEMO

Hover your mouse over the page and here’s what you see in Safari 10, macOS Sierra:




And here’s how it’s supposed to look:




Why do other flex items disappear? What’s the solution?

Hi there Rain_Lover,

I cannot test on a “Mac”, as I don’t have one. :wonky:

Have you tried adding this…

body:hover div {
  height:50vh;
  }

…to the CSS?

coothead

1 Like

Now it looks all right, but what basically happens and causes this problem?

From what I have read at “Sitepoint” it appears
that Safari" has problems rendering CSS in a
similar manner to “Chrome” or “Firefox”. :wonky:

As a non “Mac/Safari” user, I had to assume
that Safari" must have a problem with “flex”,
hence my suggested solution. :winky:

Other members, will probably be able to give
in depth information about that browser.

coothead

2 Likes

Safari, historically (and still currently) has problems when the page needs a reflow and occasionally gets the result wrong. This usually occurs when you change something important on hover or dynamically change an elements’ display.

It’s just another bug that you have to work around:)

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.