position: sticky in Chrome vs Safari

Scheint es, wie position: sticky wird unterschiedlich behandelt, in Chrome und Safari. Ich werde mein bestes tun, zu erklären, das Problem, aber Sie verweisen, die Geigen und die snippets unten an sehen, was Los ist.

Habe ich bearbeitet diese post, weil ich nicht glaube, ich habe eine gute erklären, was Los war in meiner ersten version.

Fiddle – #1 – top-Wert von 0

In diesem fiddle, das element mit sticky Positionierung hat einen top-Wert von 0. Das sollte im Grunde bedeuten, dass das element ist immer fixed. In Safari, zeigt das element eine Art, wie „absolut positioniert, um das übergeordnete element oben auf 0 pixel“.

Funktioniert es wie ich es vorhabe, aber macht nicht viel Sinn für mich. Warum hat top: 0 relativ zum übergeordneten element bei klebrigen positionierte Elemente sollen relativ, bis Sie behoben sind (und Feste Elemente sind relativ zum Fenster nicht das element)?

Was ich sage ist, dass ich erwarten zu müssen, um eine top: 40px Wert auf die sticky-element, um es zu funktionieren, wie ich will, aber es scheint, dass ich tun nicht; toll.

In der gleichen Geige, im Chrome funktioniert es, wie ich erwarte. Ein top: 0 Wert „behebt“ das element bei 0 Pixel relativ zum browser-Fenster nicht das übergeordnete element…

So, wenn ich die Funktion element, wie ich möchte (im Grunde fest in der Eltern), habe ich die top Wert 40px, außer diese funktioniert nicht richtig.

Fiddle – #2 – top-Wert von 40px

Diese Geige sieht optisch richtig in Chrom aber ich bin nicht in der Lage zu interagieren mit der Eingabe (es sei denn, ich klicke auf „leeren“ Raum unter es). In Safari funktioniert es korrekt, sieht aber 40px nach unten aus dem übergeordneten element.

Es ist offensichtlich, dass diese Browser-Handhabung position: sticky anders.

Welcher Weg ist richtig? Und gibt es eine Möglichkeit, um es ordnungsgemäß funktioniert in jedem browser, bzw.?


Bitte, ich bin nicht auf der Suche nach Anregungen, wie das zu erreichen die Wirkung, sondern warum es ist so ein Unterschied zwischen den Browsern. Ein Beantworter unten wies darauf hin, dass Sie denken, dass dies erreicht werden könnte, mit einem position: fixed element, aber es nicht klappt diese Weise (festes element innerhalb der festgelegten element mit overflow-scrolling -, in einem Gremium, das overflow hidden), wenn in diesem konkreten Fall: Siehe Beispiel


Fiddle – #1-Snippet

JS:

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

CSS:

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: -webkit-sticky;
    position: sticky;
    position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
}

HTML:

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

Fiddle – #2-Snippet

JS:

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

CSS:

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    top: 40px;
    left: 0;
}

HTML:

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

Beispiel Fiddle Snippet

JS:

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

CSS:

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
}

HTML:

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

  • Ich bin nicht nach… die snippets verhält sich identisch zu mir. Erste gelbe Karte-header, dann rot, klebrig, und der Inhalt bewegt sich durch, sowohl in Firefox wie in Chrome. Zweite gelbe Karte-header, dann grauen Raum, das sich „bewegt“, dann rot, klebrig, dann content, der bewegt sich auch, und immer wieder die gleichen in beiden Browsern. Und ich bin in der Lage, um Texte auf die Eingänge, auf beiden snippets, auf beiden Browsern. Im Moment bin ich auf einem Windows-system mit den jeweils neuesten standard version beider Browser
  • Ich habe nicht überprüft, auf einer Windows-Maschine, ich sollte wahrscheinlich haben erwähnt, dass in der Frage. Auf dem Mac gibt es einen Unterschied im Verhalten zwischen Safari/Firefox und Chrome. In der Fiddle – #1 auf Safari, funktioniert alles wie erwartet, in der Fiddle – #2-auf Safari-die sticky – element (rot) positioniert ist, 20px von oben nach unten. In der Fiddle – #1 in Chrome das element nicht „stickied“ aber ich kann die Eingabe von text in der Eingabe, in der Fiddle – #2 in Chrome das element ist stickied sondern um die Eingabe von text, die ich brauche, um klicken Sie auf „leeren“ Raum 20px nach unten, von wo das element wirklich ist
  • Ich habe versehentlich drücken Sie enter, bevor ich fertig war mit meinem ersten Kommentar, habe ich noch einige Erklärungen
  • Ich habe bemerkt ein weiterer Unterschied zwischen Google Chrome und Safari: Chrome: user-images.githubusercontent.com/36432/… Safari: user-images.githubusercontent.com/36432/… Beachten Sie, dass in meinem Fall Safari ist das erwartete Verhalten. Chrome scheint Probleme haben, die Berechnung der Höhe der klebrigen element.
  • es ist def. etwas schrullig zwischen den beiden browser. Ich habe noch nicht herausgefunden, eine gute Möglichkeit zur Beseitigung der cross-browser-Probleme. Vielen Dank für die Bereitstellung einiger Bilder, sowie
InformationsquelleAutor justinw | 2018-02-11



One Reply
  1. -2

    Gibt es scheinbar keine Notwendigkeit für die Verwendung von position:sticky in diesem Fall. Die rote input-bar muss nie gescrollt in deinem Beispiel. Sticky hilft, einen Zustand zu ändern, wenn ein element ist positioniert an der Spitze der Seite. Dieses element ist fest auf eine bestimmte position von Anfang bis Ende, so können Sie nur verwenden, die Feste position (oder sogar absolut), hier

        *,
    *:before,
    *:after  {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-size: 14px;
      line-height: 18px;
      position: relative;
    }
    
    header {
      height: 20px;
      background: yellow;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }
    
    .el {
      background: grey;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100vh;
      overflow-y: scroll;
      max-height: 100vh;
    }
    
    .content {
      background: lightblue;
    }
    
    .content span {
      display: block;
      padding: 250px 0;
    }
    
    .sticky {
      background: red;
      width: 100%;
      position: fixed;
      top: 20px;
    }

    Check-out von Apple Verwendung von position:sticky hier => https://www.apple.com/do-more/

    • Dies beantwortet nicht die Frage. Unabhängig davon, ob es eine Arbeit um die ich bat warum das Verhalten anders ist zwischen den Browsern, nicht wie kann ich erreichen diesen Effekt.
    • Ich bin froh, dass Sie umgeschrieben habe deine Frage oben. Die Antwort, die Sie erhielt von mir war vielleicht ein Spiegelbild der Art, wie es ursprünglich formuliert. Ich verstehe deine Frage jetzt viel besser.
    • hast du jemals deine Antwort bekommst? Es scheint, Sie landete genau Fragen, warum safari und chrome unterschiedlich sind.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.