XenForo 2 border-radius, rendu différent selon appareil

Nicolas · 28 Février 2023

C'est assez étonnant, le code pour le petit FR dans un rond bleu après le logo est le suivant:

Less:

.p-header-logo:after {
    content: "FR";
    position: relative;
    font-size: 1em;
    bottom: 0.45em;
    left: 1px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    padding: 2px 5px 3px 4px;
    background: #009ACF;
    color: @xf-buttonTextColor;
    border-radius: 50%;
}

Pas de problème sur PC mais sur mon iPhone le rendu est assez étrange, le rond s'est ovalisé.

Et pourtant avec les outils de développement de Edge, en mode smartphone cela passe correctement

Capture web_28-2-2023_21023_xenforo.fr.jpeg

Est-ce qu'un des membres peut poster une capture d'écran sous Android ou au moins signaler si le rendu est correct ou pas ?
Merci.

Oliver · 1 Mars 2023

Désolé je suis sur iOS aussi.
Mais c'est pas forcément le radius qui est mal interprété ça peut être aussi le padding. À voir...

Hika Matik · 2 Mars 2023

Je suis sous Android mais pas eu le temps d'essayer, apparemment le logo aussi s'est pris un coup de rabot !

hybrid56 · 2 Mars 2023

Perso je ne vois même pas le rond FR (testé sous edge et firefox) depuis que l'ancien a disparu. J'ai vidé mon cache via ctrl + f5.
Sinon pour faire un cercle en css tu as juste besoin de border-radius:50%; et background:#red;
Test juste avec ça pour voir. Peut être quelque chose fait conflit.

Maxime H · 3 Mars 2023

hybrid56 à dit:
tu as juste besoin de border-radius:50%; et background:#red;

Pas si tu as du contenu à l'intérieur, mets anticonstitutionnellement dans une div et applique un radius de 50% t'auras jamais un rond. (d'ailleurs son code contient bien un radius à 50% et du padding pour équilibrer le FR qui est plus large que haut).

Par contre oui il y avait probablement un autre élément qui faisait conflit.
Mais comme d'habitude avec cet admin adepte de la jambe coupée il a résolu le problème par ablation de celui-ci.

Remarque c'est efficace !

Nicolas · 3 Mars 2023

CtrlAltSuppr · 9 Mars 2023

XenForo 2 border-radius, rendu différent selon appareil

Nicolas

Administrateur

Oliver

Membre

Hika Matik

Membre

hybrid56

Support WordPress

Maxime H

Membre

Nicolas

Administrateur

CtrlAltSuppr

Membre

Membres en ligne

Messages récents

Nous respectons votre vie privée