Safari（ウェブキット）にオーバーレイdivが表示されない

Question

私は、画面を覆う不透明な画像の上にセンタリングするdivがあります。私はそれがクロム（点滅）でうまく動作するようになっているが、私はそれをSafari（ウェブキット）に表示することはできない。 simplified JSFiddle version of my issueを作成し、コードスニペットもここに含めました。

HTML

<div id="home"> 
    <div class="wallpaper"></div> 
    <div class="info-wrapper"> 
    <span class="name">John Doe</span> 
    </div> 
</div> 

SCSS

#home { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    min-height: inherit; 
    display: flex; 
    align-items: center; 
    background-color: black; 
} 

.wallpaper { 
    width: 100%; 
    height: 100%; 
    min-height: inherit; 
    opacity: .5; 
    background: url(https://images.unsplash.com/photo-1440700265116-fe3f91810d72); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

.info-wrapper { 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    color: white; 
    > .name { 
    font-weight: 700; 
    font-size: 7em; 
    } 
} 

それは簡単にこの問題を解決する作る場合、私は私のHTMLの構造を変更することに開いています。

Answer 1

要素は「位置：絶対」を持っている場合[更新]

は、包含ブロックは「絶対的」、「相対」または「固定」の「位置」で最も近い祖先によって確立さ

あなたはこの link

.container { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.red { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.green { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: green; 
 
    position: absolute; 
 
}

<div class="container"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
</div>

に詳細を取得することができます

このサンプルでは、​​leftプロパティを設定しない緑色のボックスの値はautoであり、結果は最も近い要素を参照する必要があります。そして、これはSafariとFirefoxで正しく表示されます。 Chromeは標準に準拠していません。

---

[古い]

私は何が必要だと思うドキュメントフローのうち、壁紙を聞かせています。サファリでサンプルを実行します。 sample

.wallpaper { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    min-height: inherit; 
    opacity: .5; 
    background: url(https://images.unsplash.com/photo-1440700265116- fe3f91810d72); 
    background-size: cover; 
    background-repeat: no-repeat; 
}