web-dev-qa-db-fra.com

Position Safari: Post-it ne fonctionne pas en débordement: élément auto

Selon CanIUse , il existe un problème connu avec Safari et position:sticky dans un élément overflow:auto:

Un parent dont le débordement est défini sur auto empêchera la position: sticky de fonctionner dans Safari

Cependant, c'est le cas d'utilisation exact dont j'ai besoin. J'ai un div à défilement, qui est divisé en deux colonnes. La colonne de droite doit être collante et ne jamais bouger, même lorsque la div est entièrement défilée. La raison pour laquelle j'utilise position:sticky dans la colonne de droite est que je souhaite que l'utilisateur puisse faire défiler la colonne de gauche avec le curseur sur la colonne de droite. Et c’était la seule solution qui, à mon avis, avait fonctionné.

Voici un exemple de travail pour Firefox/Chrome: http://cssdeck.com/labs/zfiuz4pc La zone orange reste fixe pendant le défilement, mais pas dans Safari. .

L'exemple ci-dessus contient des enveloppes inutiles à mon problème, mais je voulais reproduire le plus fidèlement possible l'environnement dans lequel je veux que ce code fonctionne. Le contenu de base de celui-ci est que j'ai ceci:

<div class="modal-content">
  <div class="left-content">
  </div>
  <div class="sticky-element">
  </div>
</div>

Et le CSS:

.modal-content {
  display: flex;
  overflow: auto;
  flex-flow: row nowrap;
}

.left-content {
  flex: 0 0 300px;
}

.sticky-element {
  position: sticky;
  top: 0;
  right: 0;
  width: 200px;
}

Encore une fois, cela fonctionne dans FF/Chrome mais pas dans Safari. Existe-t-il une solution de contournement pour que cela fonctionne dans tous les navigateurs? Ou y a-t-il une approche différente que je peux utiliser pour maintenir la possibilité de défilement même avec le curseur de la souris sur l'élément collant?

csssafarioverflowsticky
2
accelerate

J'ai eu cette solution de quelqu'un d'autre:

http://cssdeck.com/labs/bu0nx69w

Fondamentalement, au lieu de position:sticky, utilisez position:fixed pour le panneau de droite. La clé consiste également à vous will-change:transform dans un div parent (dans l'exemple ci-dessus, dans .modal-content) afin que position:fixed devienne fixe par rapport à ce parent et non dans la fenêtre d'affichage. C'est une petite astuce soignée

0
accelerate

je ne peux pas vraiment tester cela pour le safari en ce moment, mais cela a toujours été une alternative pour moi lors de la création d'un pied de page collant, par exemple:

<!DOCTYPE html>
<html>
<head>
    <title>sticky side div</title>
    <style type="text/css">
        .maindiv{
            position: relative;
            display: inline-block;
            background-color: forestgreen;
            width: calc(100vw - 150px);
            height: 100%;
            overflow: auto;
        }
        .sidediv{
            position: fixed;
            display: inline-block;
            background-color: lightyellow;
            float: right;
            width: 100px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="maindiv">
        Lorem 45    
    </div>
    <div class="sidediv">
        Lorem 30
    </div>
    <div class="maindiv">
        Lorem 100
    </div>
    <div class="maindiv">
        Lorem 900
    </div>
</body>
</html>

une fois que vous connaissez la largeur de votre contenu correct, ajoutez-y un peu plus de px, puis utilisez le css calc function pour vous assurer que les autres div ne s'y glissent pas 

il existe également un bogue connu avec vh et vw dans Safari 7. Vous pouvez le corriger en définissant height: héritez des éléments #child dont les parents ont vh hauteurs ou vw largeurs

mais ma meilleure recommandation, si vous n’allez pas chercher de l’aide d’un navigateur à l’autre est d’utiliser CSS Grids

0
Bobby Axe