[Résolu] Pas d'affichage de couleur de fond sur Safari Mobile

Bonjour,

Je viens de créer une page en HTML5 à partir de Schnaps.it, la voici:
La page en question

La page fonctionne parfaitement sur tous les navigateurs (mobiles ou non) sauf sur Safari Mobile/Safari 4.0, où le background de mon header et de mon footer disparaît mystérieusement.

Auriez-vous une idée de la cause, et une solution valide à ce problème ?
Merci d'avance

c'est uniquement la couleur qui disparait?

Hmm visiblement la couleur disparaît et le logo n'est pas centré.
Le texte ne se voit pas car c'est du blanc sur blanc.

on dirait que ton css est mal interprété....

essaye au moins dans un premier temps, de mettre la couleur en dur, pour tester et voir si ça vient de la feuille de style.

<header class="line pam txtcenter" role="banner" id="header" [b]style="background-color:#BC0727;"[/b]>

Merci pour tes réponses.

J'ai tenté de mettre le style dans le code HTML, mais ça ne change rien.

Voilà ce qui se passe exactement, c'est assez étrange:
- le logo est décalé à gauche au lieu d'être centré et se retrouve au-dessus d'un rectangle rouge de la couleur voulue pour mon background; le footer se retrouve sans background (fond blanc). Vous pouvez voir ce rendu affreux sur ce screenshot.
- si je laisse mon CSS tel qu'il était au départ, le texte est bien centré et coloré en blanc... comme le demande la feuille CSS. On dirait donc que c'est la commande background-color qui déraille.

Se pourrait-il que Safari 4.0/Mobile ait des soucis avec les termes "header" et "footer" d'HTML5 ? (m'enfin dans ce cas-là pourquoi le texte est correctement coloré...)

Si quelqu'un a des infos ou des idées là-dessus, merci de m'éclairer !

Toum a écrit :


Se pourrait-il que Safari 4.0/Mobile ait des soucis avec les termes "header" et "footer" d'HTML5 ? (m'enfin dans ce cas-là pourquoi le texte est correctement coloré...)

J'ai bien une idée, tes textes sont centré car ils sont dans de balises de type block reconnue par les navigateurs depuis toujours, pour ce qui est de <header> et <footer>, je tenterais bien un display:block, et si cela ne suffit pas , alors un peu de js en plus, comme pour les vieux IE (element = document .createElement( tagName );
<edit>

Toum a écrit :

- le logo est décalé à gauche au lieu d'être centré et se retrouve au-dessus d'un rectangle rouge de la couleur voulue pour mon background; le footer se retrouve sans background (fond blanc).

La description est typique d'un element en display:inline ou d'une balise inconnue : http://codepen.io/anon/pen/bBLek

Cdt,
Modifié par gc-nomade (20 Nov 2013 - 20:30)

Merci pour ta réponse gc-nomade,

En fait je viens de résoudre le problème en changeant mes balises <header> et <footer> par de simples <div> dans mon code HTML. Donc visiblement Safari 4.0 et Safari Mobile (peut-être pas toutes les versions) ont du mal à gérer ces balises HTML5.

Je trouve ça un peu dommage de mettre des <div>, les balises <header> et <footer> permettent de donner un peu plus de sens au code. Mais bon visiblement c'est le prix à payer pour ne pas avoir ce souci d'affichage... ce n'est pas pour Safari 4.0 que ça me dérangeait, mais plutôt pour certaines versions de Safari installées sur iPad et sur lesquelles le bug se produisait

il existe des scripts en javascript pour forcer les navigateurs déficients à reconnaitre ces balises nouvelles comme des éléments de type block.

Merci du conseil.
Mon seul souci... c'est que je ne connais rien au Javascript, et donc que je répugne un peu à en mettre, surtout pour un "détail" (bouuuh, c'est nul, je sais).