[Résolu] Marge haute pour élément sous flottants

(reprise du message précédent)

Bonsoir _laurent,

Idéales les propriétés scroll-padding-top et scroll-margin-top !

Comme l'indique ton article c'est le complément indispensable de position: sticky.

scroll-padding-top n'ajoute du padding que quand c'est nécessaire.
Si l'ancre est assez basse dans la page pour que lien d'évitement ne puisse pas la monter en haut aucun padding n'est ajouté.
Très bien conçu.
Et le support semble bon.

J'ai employé une autre propriété assez peu connue.
html {scroll-behavior: smooth}
Cela donne un effet de défilement sympa quand on clique sur un lien d'évitement.

Et j'espère dernier détail il faut appliquer à l'élément en position sticky un z-index positif.
Autrement, j'ai constaté cela sur mon site de test, certains éléments vont selon des règles mystérieuses s'afficher au dessus de l'élément sticky.

Voilà la dernière version du codepen.

J'aurai peut-être d'autres questions, j'attends pour cocher Résolu.

boteha_2 a écrit :
J'ai employé une autre propriété assez peu connue.
html {scroll-behavior: smooth}

Celui là je le connaissais

boteha_2 a écrit :
Et j'espère dernier détail il faut appliquer à l'élément en position sticky un z-index positif.
Autrement, j'ai constaté cela sur mon site de test, certains éléments vont selon des règles mystérieuses s'afficher au dessus de l'élément sticky.

Oui c'est du Z index normalement

boteha_2 a écrit :
J'aurai peut-être d'autres questions, j'attends pour cocher Résolu.

Si tout marche comme tu veux coche le résolu et ouvre un autre sujet si tu as une autre question, ca permettra à d'autres de venir t'aider

Bonne soirée

Bonjour _laurent,

Je pense que nous avons bien fait le tour du sujet et que je peux cocher "Résolu".

Je te remercie encore pour ton aide précise et efficace.

Bonjour,

J'ai le regret de devoir rouvrir cette discussion.

Safari 14.0 ne connait pas scroll-padding-top.

Comme ce navigateur est encore assez répandu, j'ai conditionné le positionnement sticky à la compréhension de scroll-padding-top.

@supports (scroll-padding-top: 80px)
{
html {scroll-padding-top: 80px}
ul#menuhaut {position: sticky; top: 0}
}

Safari 14.0 continue à, positionner en sticky alors qu'il n'applique pas la propriété scroll-padding-top.

Test possible avec le codepen.

Une idée sur cette contradiction ?

Bonjour,

Il me semble que safari 14 (comme safari 11, 12 et 13) reconnait scroll-padding-top. Le support était simplement partiel.

Il semble que tout soit ok depuis safari 14.1 (qui date de 2 ans).

Ça veut dire 2 choses :
1) tu ne peux pas utiliser @supports (scroll-padding-top:...) pour écarter safari 14
2) sauf si le support partiel sur les safari 11, 12, 13 et 14.0 empêche de voir quelque chose d'important, ça ne sert pas à grand chose de vouloir le contourner.

Amicalement,

Bonjour parsimonhi,

Merci pour ton suivi.

Support partiel de Safari, cela veut dire que la propriété n'est pas traitée mais ne peut pas être écartée avec @supports, merci.
Accessoirement le support est également partiel pour scroll-behavior.

Est-ce qu'ils vont passer pour 14.0 du support partiel au support total ?
Ou est-ce foutu, il faut attendre les mises à jour vers 14.1 ?

Les informations cachées par l'absence de padding ne sont pas vitales mais ce n'est pas joli, tu ne vois pas la tête de chapitre et les premières lignes, c'est bizarre, même si la plupart des utilisateurs comprendront qu'il faut faire un scrolling manuel.

L'alternative JS avec scrollTo (ou scrollTop) n'est pas trop difficile à mettre en œuvre, je vais y réfléchir

Autrement, avec @supports il faudrait trouver une propriété qui ne soit pas du tout supportée par 14.0 tout en étant respectée par 14.1 et les autres grands navigateurs, cela semble mission impossible.

Bonsoir,

en cherchant je suis tombé sur ce lien anglophone : https://ppuzio.medium.com/flexbox-gap-workaround-for-safari-on-ios-14-13-and-lower-ffcae589eb69

Tu devrais y trouvé le moyen de cibler les version 14 et inférieur de safari via @supports.

En faisant une lecture en diagonal de l'article, il semblerait que l'approche

@supports (-webkit-touch-callout: none) and (not (translate: none)) {/*safari <14.1 */}

soit une piste.

Cdt,

Bonjour gcyrillus,

Merci de l'information.

Je regarde cela demain.

Je vous tiens informé.

Bonjour,

boteha_2 a écrit :
Est-ce qu'ils vont passer pour 14.0 du support partiel au support total ?
Ou est-ce foutu, il faut attendre les mises à jour vers 14.1 ?

On en est à la version 15 de safari depuis presque 6 mois. La version 14.0 est sortie en septembre 2020 et la 14.1 qui normalement règle ton problème est sortie dans la foulée. Personne parmi les rares ayant encore la 14.0 ne passera à une version postérieure désormais. Ils ne le feront que s'ils changent de machines. Et pour les versions antérieures (13, 12, 11, etc.) ils ne changent pas soit parce qu'ils ne le peuvent pas (machine trop ancienne), soit parce qu'ils pensent que la nouvelle version risque de leur bouffer trop de ressources. Et dans tous les cas, avoir un affichage nickel est très probablement le cadet de leur soucis.

Vérifie simplement que tout reste accessible. Ce sera largement suffisant.

Note que les éditeurs de navigateurs font tout pour que ce soit difficile de cibler une version particulière de leur produit. Ne les déçois pas et ignore les versions anciennes !

Amicalement.

Bonjour parsimonhi,

Je comprends ton point de vue et je le respecte grandement, mais comme écrit l'auteur du hack trouvé par gcyrillus :

Since working on a commercial project almost always means having to support at least the previous version of each browser available,

J'ai découvert le mauvais support de scrolling-padding-top sur l'iPhone d'une jeune graphiste un peu fauchée, si on peut lui proposer une solution agréable sans l'obliger à acheter un nouveau téléphone c'est sympa.

D'après ce que j'ai compris, cette déclaration va cibler uniquement les versions Safari 14.0 et inférieure :

@supports (-webkit-touch-callout: none) and (not(translate: none))
{
ul#menuhaut {position: static}
}

J'ai mis à jour le codepen.
Je ferai demain un test en réel.
Je vous tiens informés.

Bonjour,

J'ai fait le test avec Safari 14.0 sur téléphone et sur Macbook.

Assez décevant, la condition suivante ne sert à rien.

@supports (((-webkit-touch-callout: none) and (not(translate: none))) or not(scroll-padding-top: 65px))
{
body > ul#menuhaut {position: static; box-shadow: none}
}

En gros Safari 14.0 dit "oui, je comprends scroll-padding-top" mais il n'exécute pas.

Ce n'ai pas le premier bug que je remarque avec ce navigateur sur les mêmes appareils.
Non prise en compte de position: fixed. En l’occurrence il s'agit de coller un bloc en bas de page. Tous les navigateurs le font sauf Safari.
Mauvaise taille des pop-up généré par window.open en JS.

Peut-être un mauvais paramétrage du navigateur par la faute de l'utilisateur.
Modifié par boteha_2 (06 Mar 2022 - 17:39)

Bonjour,

Je me demande comment t'as fait pour trouver un safari 14.0 : personne n'utilise ça !

Amicalement,

parsimonhi a écrit :
Je me demande comment t'as fait pour trouver un safari 14.0 : personne n'utilise ça !

Le téléphone et le Macbook d'une graphiste.

Si tu dis que plus personne n'utilise 14.0 tant mieux, je vais lui conseiller une mise à jour.
Modifié par boteha_2 (06 Mar 2022 - 20:27)