Soucis de positionnement et de taille sous safari (css fonctionnel avec les autres navigateurs)

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
je suis en train d'entourer certains éléments informatifs du forum par ce genre d'encadrement :


Tout est géré via css et s'affiche de la même maniére sur tous les navigateurs hormis sur safari.
Bizarrement le positionnement des éléments en after n'est pas respecté et les tailles des éléments sont inférieurs d'1 px sous safari.

Voici un exemple avec l'encadrement fait sur la variable {S_WATCH_TOPIC}
le css

Code:

a[href$="?unwatch=topic"]{font-size: 12px;background-color:#5a8f00;padding-top:10px;padding-bottom:10px;padding-left:10px;width:239px!important;height:15px!important;position:relative;bottom:30px;margin-right:2px!important;white-space:nowrap}
a[href$="?unwatch=topic"]:after{content:"";border:18px solid transparent;border-right-width:12px;border-left:0;display:inline-block;position:relative;right:22.2%;top:13.7px;z-index:3;width:0;height:0;border-right-color:#5a8f00;margin-top:15px}

a[href$="?watch=topic"]{font-size: 12px;background-color:#5a8f00;padding-top:10px;padding-bottom:10px;padding-left:10px;width:239px!important;height:15px!important;position:relative;bottom:30px;margin-right:2px!important;white-space:nowrap}
a[href$="?watch=topic"]:after{content:"";border:18px solid transparent;border-right-width:12px;border-left:0;display:inline-block;position:relative;right:24.4%;top:13.7px;z-index:3;width:0;height:0;border-right-color:#5a8f00;margin-top:15px}


la partie du template concerné

Code:

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
  <tr>
    <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><br /><span class="gensmalla">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
    <td class="row1 " align="right" valign="top" ><br /><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  
    <td class="row2" colspan="2" align="right" valign="top"><br /><span class="gensmall" id="surva">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
</table>


le résultat sous opera


le résulta sous safari


Pour le positionnement de l'élément en after, j'ai tenté aussi bien du % que du PX.

Pour l'exemple donné, sous opera et pour l'élément watch=topic un right de 24.4% positionne l'élément correctement alors que sous safari, il faudrait un 25.4%.

Autre soucis que je n'arrive pas à expliquer, sous opera l'élément watch=topic à une hauteur de 35px alors que sous safari il est de 34px. Résultat des courses, ce px manquant me fausse complétement le border:18px de l'after.

Vous auriez une idée pour résoudre ce soucis de compatibilité ?

Merci par avance pour votre aide

[Walt]

Bonjour,

Vous testez avec Safari depuis un appareil Apple sous iOS ou depuis un ordinateur fonctionnant sous un autre système d'exploitation ?

Cordialement,
Walt

[demeter1]

Bonjour Walt,
merci pour l'intérêt porté à cette demande.

je fais mes modifs depuis un pc qui est sous windows 10.

[Walt]

La version de Safari que vous avez sur Windows est la version 5, vraisemblablement, et elle n'a plus été maintenue ou améliorée par Apple depuis 2012. Il est donc fréquent de constater qu'une page diffère dans son apparence sur ce navigateur, puisque tous les autres ont depuis adopté des standards que Safari sur Windows ne connait pas - et ne connaitra pas, a priori...

Précisons en outre que seuls 4% des internautes naviguent sur Safari, et probablement 98% d'entre eux le font via un appareil Apple qui n'est pas concerné par ce souci de mises à jour.

Cordialement,
Walt

[Neptunia]

Coucou Stéphane,


Dans le meilleur des cas ton navigateur date de 2012, autrement dit de la préhistoire.
Du coup il n'est pas forcément anormal d'avoir un rendu différent sur ce navigateur.

Pour en être certain il faudrait soit tester (ou faire tester) depuis un Mac, soit faire tester depuis un appareil mobile sous iOS

[demeter1]

Merci Walt pour cette réponse qui me conforte dans les quelques différences que je constate avec ce navigateur.

Merci Hélène pour ton intervention. Hélas, je n'ai pas de MAC de dispo. je vais voir le rendu sous ios en utilisant un émulateur.

Un hack css est-il envisageable pour ce navigateur pour sa version windows? je vous avouerai avoir fait de multiples recherches sur le net mais tous les codes utilisés se sont avérés complétement obsolètes.

[Lixyr]

Bonsoir Demeter,

J'ai un mac sur les genoux. Je peux regarder, seulement je n'ai pas accès au forum mis à part pour la partie "La vie du forum", dans lequel je ne trouve pas de lien concerné par le changement.

Pouvez-vous m'indiquer un endroit où je peux visionner le soucis sans avoir à m'enregistrer sur votre forum ?

/edit/

Au temps pour moi, voici ce que j'ai trouvé :

[demeter1]

Bonjour Lixyr,
Merci pour cette aide.

la variable en elle même n'est acessible qu'en étant connecté.

Voici les identifiants d'un compte membre

[Lixyr]

Bonjour Demeter,

Voici ce que j'ai sous Mac :

[demeter1]

Merci Lixyr pour cette capture d'écran .
Apparemment, sous Mac, le soucis de positionnement est encore plus accentué pour l'élément en after sur la variable {S_WATCH_TOPIC}
On voit également un soucis sur l'encadrement de l'intitulé "permissions de ce forum" avec un positionnement non respecté d'1px sur l'élément after.

Il va très certainement falloir que je passe par un hack css spécialement pour ce navigateur. le tout c'est de trouver la bonne formule pour que cela soit aussi compatible pour les utilisateurs de Mac que ceux de windows.

[Lixyr]

Bonjour Demeter,

j'ai regardé sous Firefox, et j'ai le même résultat que sur Safari.
J'ai tenté de voir ce qu'il se passait, et je vois que vous utilisez after à chaque fois. Je pense que pour une flèche à gauche, il faudrait mettre before, plutôt.

Qu'est-ce que ça donne si vous essayez ce code ?

Code:

a[href$="?watch=topic"]::before {
    content: "";
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid transparent;
    border-right: 12px solid #5a8f00; /* épaisseur de la flèche */
    display: inline-block;
    position: relative;
    left: -40px;
    top: 14px;
    margin: 15px -30px 0 0; /* a droite, on enlève l espace crée par la flèche 12 a droite et 18 a gauche  */
}

[demeter1]

Bonjour Lixyr,
Désolé de ce retard de correspondance


Cela résoud le soucis de positionnement sous safari.

j'ai un peu honte de ne pas y avoir pensé .

Un grand merci pour cette aide