Safari : décalage 1px à gauche sur images

Français Spreadshop
1

Bonjour,

Je ne sais pas à quoi sert la règle CSS suivante :

.SprdMain .sprd-product-list-item__image::before {
content: “”;
display: table;
padding-top: 100%;
}

Mais sur le navigateur Safari (en comparaison à Chrome), dans les listes, elle provoque un décalage de l’image de 1px à gauche et parfois (pas toujours) de 1px en bas. Ceci est bien visible si l’on affiche la bordure de l’image, et visible aussi si on souhaite afficher par exemple une étiquette “Nouveau” par-dessus certains designs (qui sera décalée de 1px à gauche sous Safari, et alignée avec l’image sous Chrome).

safari-decalage-image-left-bottom

Alors si elle n’est pas indispensable, j’aimerai pouvoir la modifier, voire la désactiver.

À quoi sert-elle ?

2

J’avoue que j’ai aucune idée! J’essaye pourtant de te trouver une reponse.

3

EDIT: Laisse tomber! J’ai eu ma reponse…

4

J’ai pu corriger ce tout petit souci d’apparence en ajoutant ceci à la règle:

.SprdMain .sprd-product-list-item__image::before
{
position: absolute;
top: 0;
left: 0;
}

1 Like
5

Alors, le décalage de 1px d’image - c’est un bug dèja connu et nous travaillons dessus.

Pour la règle CSS… c’est pour éviter “le contenu décalé”, alors que le contenu bouge quand le navigateur charge le contenu pour les champs inoccupés. C’est en fait assez indispensable! C’est peut-être mieux éxpliqué ici (en Anglais, je suis desolée):

1 Like
6

Ok, merci, je comprends mieux. Cela réserve l’espace pour les images et textes chargés avec Ajax, sans rechargement de la page, et ça stabilise alors l’affichage des pages entre le moment ou les contenus se chargent et le moment où ils sont affichés.

CSS-Tricks : excellent site, à recommander :wink:

1 Like