web-dev-qa-db-fra.com

Pourquoi ne positionne-t-il pas: le travail collant dans Chrome?

Comment obtenez-vous position: sticky travail?

J'ai essayé ce qui suit en Chrome 26.0.1410.43 m et cela ne fonctionne pas:

thead {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 10px;
}

http://jsfiddle.net/8LRms/

Selon cela, cela devrait fonctionner:

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Il semblait être pris en charge dans Chrome 23.0.1247.0, mais maintenant il ne fonctionne pas dans 26.0.1410.43 m.

csscss3google-chrome
35
Petah

MODIFIER : Vous devez lancer avec --enable-experimental-webkit-features indicateur activé via about:flags.

Mise à jour: Cela ne fonctionne pas sur Chrome v35 à v51, Chrome 52 réactive cela avec l'indicateur de fonctionnalités de la plateforme Web expérimentale. de Chrome 56 position: sticky fonctionne hors de la boîte.

33
AlienWebguy

Pendant une courte période, Chrome a activé cette fonctionnalité derrière un indicateur, --enable-experimental-webkit-features, dans leur section about: flags. Cependant, il a été rapidement supprimé en raison de l'inefficacité de la façon dont le navigateur repeignait.

Depuis Chrome 56 , cette fonctionnalité est de nouveau activée sans indicateur.

Depuis Chrome 52.0.2743.116, cette fonctionnalité est activée par l'indicateur --enable-experimental-webkit-features une fois de plus.

Pour répondre à la question mise à jour sur pourquoi il a été supprimé : Google (Chromium) a supprimé la prise en charge de position: sticky en raison de la nature inachevée de la spécification, et ils se concentreront sur d'autres fonctionnalités de défilement en attendant:

"Nous aimerions éventuellement implémenter position: sticky, mais l'implémentation actuelle n'est pas conçue d'une manière qui s'intègre bien avec le système de défilement et de composition existant . Par exemple, position: sticky s'appuie sur updateLayerPositionsAfterDocumentScroll pour fonctionner correctement, mais cette fonction n'a aucun autre objectif et peut être supprimée. De même, position: sticky ne fonctionne pas du tout avec le défilement à débordement composite, qui est désormais le mécanisme par défaut pour conduite défilement dans le moteur.

Une fois que nous avons mis en ordre notre maison de défilement et de composition, nous devons revenir à la position: collant et implémenter la fonctionnalité d'une manière qui s'intègre bien avec le reste du moteur . Pour l'instant, cependant, ce CL supprime notre implémentation actuelle afin que nous puissions nous concentrer sur l'amélioration de notre implémentation des fonctionnalités de défilement que nous avons déjà livrées. "

Je souligne. Vous pouvez en savoir plus à ce sujet ici.

51
TylerH

FilamentGroup a publié un polyfill Nice pour position: sticky. Jetez un œil à: https://github.com/filamentgroup/fixed-sticky

12
RWAM

Il semble que cela ne fonctionne pas sur iOS7 Safari s'il existe un nœud parent avec overflow: hidden ensemble de propriétés.

5
user1414673

Lorsque Chrome est passé au moteur de rendu Blink avec la version 28, ils ont abandonné Webkit, qui est le seul moteur à le prendre en charge (sur Mac et iOS.)

Donc, sauf si vous utilisez Safari sur Mac ou iOS, ou Chrome sur iOS (pour l'instant), vous ne pourrez pas le prendre en charge dans d'autres navigateurs.

Malheureusement, c'est un moyen simple et efficace de faire flotter des éléments.

3
Bice

La bonne nouvelle est celle à partir de Chrome 56 (actuellement bêta en décembre 2016, stable en janvier 2017)) position: collant est maintenant de retour dans Chrome.
Donc, dans un avenir proche, seul Edge serait le seul de tous les navigateurs à ne pas l'avoir encore implémenté, à l'exception des navigateurs pour appareils mobiles, mais j'espère qu'ils l'implémenteront aussi bientôt.

1
Taras Yaremkiv