Bug d'affichage Safari / Overflow:hidden & scrollbar personnalisée
Bonjour,
Je suis actuellement en train de créer mon site web personnel, qui est disponible à cette adresse : http://www.portfoliotest.biz.st
Pour créer ce site, je suis parti d'un script JS que j'ai acheté : Revolver Sliding Website, et j'ai recours à plusieurs reprises au plugin "Malihu Custom scrollbar" pour gérer les scrollbar qui apparaissent sur le site.
Je teste actuellement le site sur les différents navigateurs, et ça fonctionne très bien, sauf sous Safari 8, sous Mac OS.
Bug constaté : le site fonctionne au 1er chargement, mais lorsqu'on revalide l'adresse dans la barre d'URL, le contenu central de la page ne s'affiche plus (attention, je parle bien de revalider l'adresse, et non pas d'actualiser la page, car dans ce cas, cela fonctionne).
Du coup, j'ai identifié que ce bug ne se produisait que lorsque j'activais la scrollbar personnalisée (qui est appelée dans le code de la page par les lignes suivantes :
Code:
1
2
3
4
5
6
7
8
9
| <script type="text/javascript">
(function($){
$(window).load(function(){
$("body").mCustomScrollbar({
theme:"minimal"
});
});
})(jQuery);
</script> |
En allant un peu plus loin, il me semble que le problème est causé par le fichier CSS appelé par les scrollbars personnalisées (jquery.mCustomScrollbar.css), et en particulier la propriété overflow:hidden, qui permet de désactiver les barres système assez disgracieuses :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.mCustomScrollBox{ /* contains plugin's markup */
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
.mCSB_container{ /* contains the original content */
overflow: hidden;
width: auto;
height: auto; |
Si je supprime les 2 lignes en rouge, le bug d'affichage sous Safari disparaît... mais évidemment, les scrollbars personnalisées ne fonctionnent plus (sachant que j'utilise également une variante horizontale sur la page #portfolio). J'ai essayé de mettre directement la valeur overflow:hidden directement dans le fichier css au niveau du body, mais ça ne fonctionne pas non plus.
Bref, ça fait des heures que j'essaye de venir à bout de ce comportement de Safari, et je n'arrive pas à m'en défaire ... C'est pourquoi je me permets de solliciter votre aide !
Si vous avez des idées, je suis preneur :)
Merci d'avance !
