web-dev-qa-db-fra.com

Problème de défilement sur l'élément fixe de position sur iOS

Je propose un projet mobile qui a un certain nombre de modules ayant des éléments positionnés comme fixes. Le problème auquel je suis confronté ne concerne que les navigateurs fonctionnant sur iOS. Le problème exact est que chaque fois que je tr pour faire défiler le corps de la page ayant, disons la barre d'outils inférieure, comme fixe, l'élément fixe entier se déplace respectivement avec le défilement, et une fois que le défilement se termine complètement, alors seulement il revient à son lieu attribué.

J'ai donné au corps de la page une règle css relative. Veuillez aider, car cela ne se produit que sur iOS.

 .add-to-block {
    background: #fff;
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: block;
    height: auto;
    width: 100%;
    *(inner content element) {
        inner content element styling...
     }
}
ioscssscrollcss-positionfixed
19
Aman Pandey

Veuillez essayer ceci, source ici

    .add-to-block {
        transform: translate3d(0,0,0);
        .....
        .....
    }
9
Abed Putra

Il n'y a pas vraiment de réponse facile à cela car cela a été un problème connu sur ios pendant un certain temps (soi-disant corrigé dans ios8) mais cela vous donne quelques façons de le résoudre: https://remysharp.com/ 2012/05/24/issues-with-position-fixed-scrolling-on-ios il détaille tous les problèmes avec la position corrigée sur les appareils ios et les moyens possibles de le corriger si vous devez l'utiliser.

3
Steven Hoskins

Aucune des solutions proposées n'a fonctionné pour moi, bien que j'avais l'élément fixe à l'intérieur de la div de défilement (et l'ai déplacé vers le haut), n'avait aucune transformation ou d'autres propriétés de création de calque sur les éléments parents (et créé un calque sur l'élément fixe), etc. .

Ma solution était de simplement changer l'élément fixe pour qu'il soit position: sticky;

0
tuberains