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

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 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)