position: fixe ne joue pas bien avec le menu hors canvas dans Chrome et IE

Ce qui est prévu

J’utilise un menu hors canvas en utilisant CSS et JavaScript. Le menu hors canvas fonctionne comme prévu. Je veux un menu latéral à gauche de l’écran et se déplace lorsque le menu est déclenché. L’idée est d’avoir un déclencheur de menu de 100px et une hauteur de 100% et toujours à gauche de l’écran. En utilisant la position absolue, j’ai eu des problèmes de hauteur sur tous les navigateurs, en utilisant une position fixe Firefox fonctionne correctement mais rencontre des problèmes mentionnés ci-dessous.

les erreurs

Problèmes liés à Firefox: Aucun, pour autant que je sache.

Problèmes liés à Chrome: après avoir fait défiler quelques pixels vers le bas, le déclencheur du menu de la barre latérale ne permet pas d’étirer la page entière.

Internet Explorer: La barre latérale semble disparaître complètement lorsque le menu de la barre latérale est déclenché.

jsfiddle

Parce que mon code est lourd à la fois en HTML, CSS et JavaScript, j’ai inclus un jsFiddle . Veuillez noter que le problème se produit uniquement sur Chrome et Internet Explorer, à ma connaissance. Vous pouvez reproduire le problème en faisant défiler un peu la page, puis en cliquant sur le bouton de menu de gauche.

Captures d’écran

Hors des problèmes de menu de toile

NOTE WORTHY HTML CODE (Code complet en violon)

NOTE WORTHY CSS CODE (Code complet en violon)

 html, body, .sbContainer, .sbPush, .sbContent-one { height:100% } .sbContent-one { overflow-x:hidden; background:#fff; position:relative } .sbContainer { position:relative; overflow:hidden } .sbPush { position:relative; left:0; z-index:99; height:100%; -webkit-transition:-webkit-transform .5s; transition:transform .5s } .sbPush::after { position:absolute; top:0; right:0; width:0; height:0; background:rgba(0,0,0,0.2); content:''; opacity:0; -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s; transition:opacity 0.5s,width .1s 0.5s,height .1s .5s } .sbMenu-open .sbPush::after { width:100%; height:100%; opacity:1; -webkit-transition:opacity .5s; transition:opacity .5s } .sbMenu { position:absolute; top:0; left:0; z-index:100; visibility:hidden; width:244px; height:100%; background:#872734; -webkit-transition:all .5s; transition:all .5s } .sbMenu::after { position:absolute; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.2); content:''; opacity:1; -webkit-transition:opacity .5s; transition:opacity .5s } .sbMenu-open .sbMenu::after { width:0; height:0; opacity:0; -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s; transition:opacity 0.5s,width .1s 0.5s,height .1s .5s } .sbFX.sbMenu-open .sbPush { -webkit-transform:translate3d(300px,0,0); transform:translate3d(244px,0,0) } .sbFX.sbMenu { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .sbFX.sbMenu-open .sbFX.sbMenu { visibility:visible; -webkit-transition:-webkit-transform .5s; transition:transform .5s } .sbFX.sbMenu::after { display:none } .no-csstransforms3d .sbPush,.no-js .sbPush { padding-left:244px } .sbMenuTrigger { background-color:#b23445; cursor:pointer; height:100%; width:100px; position:fixed; left:0; top:0 } .sbMainContent { margin-left:100px; width:calc(100% - 100px); top:0; padding-top:50px; position:absolute; height:100% }

Voici un travail qui nécessite très peu de modifications.

Il fonctionne de manière cohérente dans les dernières versions de FF, Chrome et IE11 / 10.

Exemple mis à jour

 .sbContent-one { overflow: visible; /* Or remove overflow-x: hidden */ } .sbMainContent { overflow-x: hidden; } .sbMenuTrigger { position: static; /* Or remove position: fixed */ }

Le moyen le plus simple de résoudre le problème dans Chrome consiste simplement à déplacer le overflow de .sbContent-one de .sbContent-one vers .sbMainContent . Ce faisant, vous ne pouvez pas réellement faire défiler l’élément .sbMenuTrigger (ce qui résout le problème) car .sbMainContent est un élément frère.

Il existe actuellement de nombreuses incohérences entre les navigateurs sur la façon dont fixed éléments fixed sont positionnés par rapport aux éléments transformés à l’aide de translate3d . Le problème dans IE était dû au fait que fixed éléments fixed sont positionnés par rapport à la fenêtre sans prendre en compte les éléments transformés à l’aide de translate3d . Pour résoudre ce problème, évitez tout positionnement fixe et ajoutez l’élément .sbMenuTrigger dans le stream normal en supprimant position: fixed (ou en remplaçant celui avec position: static , la valeur par défaut). Ce faisant, la barre latérale se développe comme prévu.

En d’autres termes:

Supprimez overflow-x: hidden de .sbContent-one (ou remplacez-le par overflow: visible ).
Ajoutez overflow-x: hidden à .sbMainContent .
Supprimer la position: fixed partir de .sbMenuTrigger (ou le remplacer par la position: static ).

Voici ma solution à votre problème. Testé sur 3 navigateurs principaux et cela fonctionne très bien!

voir violon

Jetez un coup d’œil à mes changements sur les classes suivantes:

supprimer la position relative de .sbContent-one
add height: 100% to .sbContent-two (nouvelle règle)
changements majeurs sur .sbMainContent
position absolue pour .sbMenuTrigger

les principaux problèmes étaient les suivants:

position inutile et relative de la position absolue de .sbContent-one et .sbMainContent .
la position fixe est relative à la fenêtre, son comportement varie donc d’un navigateur à l’autre lorsque vous traduisez l’élément.

J’ai réussi à le faire fonctionner sur le dernier chrome / IE11.

jsfiddle

J’ai déplacé le

À la fin de la

, le CSS est devenu:

 .sbMenuTrigger { background-color:#b23445; cursor:pointer; width:100px; position:absolute; right:-100px; top:0; bottom: 0; }

La position fixe + transformation ne sont pas toujours bienvenues par tous les navigateurs.