Bonjour.
Je rencontre un bug étrange avec Safari 7 sous Mac. J'ai déjà trouvé la solution, mais ça pourrait en aider d'autres qui rencontrent le même problème :
Je crée une page avec 4 polices chargées via @font-face. Il s'agit de 4 fois la même police avec des graisses différentes.
Je crée ensuite un menu horizontal calé dans un div qui me sert d'en-tête et positionné en "absolute" avec la technique classique des balises <ul> et <li>.
J'inclue à mes <li> un effet de changement de couleur de fond et de police, ainsi qu'un agrandissement vertical au hover pour faire apparaitre le sous-menu de chaque item.
Le tout fonctionne bien jusqu'à ce que je passe le positionnement de mon en-tête en "fixed". A partir de là, tous les textes de mon menu changent de police au hover sur un des items ! Plus précisément, ils passent à la police de graisse inférieure.
Comment c'est possible ça ???
J'ai finalement trouvé la solution : il faut que mon menu <ul> soit lui aussi en "fixed" pour qu'il laisse ma police tranquille.
J'ai testé le problème avec FireFox, Chrome et Opera sous Mac et seul Safari souffre de ce bug étonnant.
Le code :
Je rencontre un bug étrange avec Safari 7 sous Mac. J'ai déjà trouvé la solution, mais ça pourrait en aider d'autres qui rencontrent le même problème :
Je crée une page avec 4 polices chargées via @font-face. Il s'agit de 4 fois la même police avec des graisses différentes.
Je crée ensuite un menu horizontal calé dans un div qui me sert d'en-tête et positionné en "absolute" avec la technique classique des balises <ul> et <li>.
J'inclue à mes <li> un effet de changement de couleur de fond et de police, ainsi qu'un agrandissement vertical au hover pour faire apparaitre le sous-menu de chaque item.
Le tout fonctionne bien jusqu'à ce que je passe le positionnement de mon en-tête en "fixed". A partir de là, tous les textes de mon menu changent de police au hover sur un des items ! Plus précisément, ils passent à la police de graisse inférieure.
Comment c'est possible ça ???
J'ai finalement trouvé la solution : il faut que mon menu <ul> soit lui aussi en "fixed" pour qu'il laisse ma police tranquille.
J'ai testé le problème avec FireFox, Chrome et Opera sous Mac et seul Safari souffre de ce bug étonnant.
Le code :
@font-face
{
font-family: 'museosans100';
src: url('polices/museosans_100-webfont.eot');
src: url('polices/museosans_100-webfont.woff') format('woff'), url('polices/museosans_100-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'museosans300';
src: url('polices/museosans_300-webfont.eot');
src: url('polices/museosans_300-webfont.woff') format('woff'), url('polices/museosans_300-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'museosans700';
src: url('polices/museosans_700-webfont.eot');
src: url('polices/museosans_700-webfont.woff') format('woff'), url('polices/museosans_700-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'museosans900';
src: url('polices/museosans_900-webfont.eot');
src: url('polices/museosans_900-webfont.woff') format('woff'), url('polices/museosans_900-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#fond_entete
{
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #201C1B;
}
#entete
{
position: fixed;
top: 0;
width: 1000px;
height: 50px;
background-color: #201C1B;
z-index: 2;
}
#entete ul
{
display: inline-block;
width: 900px;
text-align: center;
}
#entete ul li
{
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 12px;
background-color: #201C1B;
font-family: museosans700;
color: #A3ADA6;
-webkit-border-radius: 0 0 30px 30px;
border-radius: 0 0 20px 20px;
vertical-align: top;
overflow: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#entete ul li:hover
{
height: 210px;
background-color: #111111;
color: #666666;
}
#entete ul li div
{
height: 100%;
line-height: 2;
font-size: 0.9em;
color: #A3ADA6;
background-color: #111111;
}
#entete ul li div a
{
display: block;
border-bottom: solid 1px #FFFFFF;
}
#entete ul li div a:last-child
{
border: none;
}
#entete ul li div a:hover
{
color: #00CCFF;
}