Safariバグ？過去のスクロール時に、固定div要素は画像要素の下半分にありますか？

Question

私はbackground-color: blackと私のウェブページの上部に固定divがあります。私はまた私のウェブページの真中にイメージを持っています。 （https://imgur.com/UteGyt6）

画像をスクロールすると、divは画像を半分にカットします。 （https://imgur.com/y4wnKUT）

divを画像の下に移動しようとしています。divを上にスクロールすると画像が上に表示されます。&が表示されます。

解決策を見つけるのに苦労しています - どんな助けも素晴らしいでしょう！ https://jsfiddle.net/q432wcx7/ （コードChromeで働いて...ないサファリ）

index.htmlを

<div class="logodiv"> </div> 

<a href="./index.html"><img src="./assets/img/logoI.png" class="logo" alt="Logo"></a> 

のstyle.css

.logo { 
    width: 500px; 
    display: block; 
    position: absolute; 
    z-index: 1000; 
    top: 240px; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 


.logodiv{ 
    width: 100%; 
    display: block; 
    position: fixed; 
    height: 184px; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background-color: black; 
    z-index: 1000; 
} 

Answer 1

- これを達成するために探し

この問題は非常に一般的であり、Safariのバグです。私は完全にこのテキストはできませんので

.logo { 
    -webkit-transform: translate3d(0,0,0); 
    width: 500px; 
    display: block; 
    position: absolute; 
    z-index: 1000; 
    top: 240px; 
    left: 0; 
    right: 0; 
    margin: auto; 
    } 

.logodiv{ 
    width: 100%; 
    display: block; 
    position: fixed; 
    height: 185px; 
    top: 0 !important; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background-color: black; 
    z-index: -1000; 
} 

私はサファリを持っていないが、私はそれが正しいと思う：

代わりにこれを試してみてください。そうでない場合は、教えてください。私は自分の答えを変えます。