Safariwanze? Beim Scrollen nach vorne ist ein festes div-Element halb auf der oberen Hälfte unter einem Bildelement?

Question

Ich habe eine feste div am oberen Rand meiner Webseite mit einem background-color: black. Ich habe auch ein Bild in der Mitte meiner Webseite. (https://imgur.com/UteGyt6)

Wenn ich scroll das Bild vorbei, schneidet das div das Bild in zwei Hälften. (https://imgur.com/y4wnKUT)

Ich versuche, das div gehen unter dem Bild so, wenn das div scrollt vorbei ist das Bild oben & sichtbar.

Kämpfen um die Lösung zu finden - jede Hilfe wäre großartig!

Blick, dies zu erreichen - https://jsfiddle.net/q432wcx7/ (-Code arbeiten in Chrome ... nicht Safari)

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

Dieses Problem ist sehr häufig - und ist ein Fehler in Safari.

Versuchen Sie stattdessen:

.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; 
} 

ich Safari nicht haben, damit ich diese nicht vollständig Text kann, aber ich denke, dass es richtig ist. Wenn es nicht ist, sag es mir einfach und ich werde meine Antwort ändern.