Position fixed werkt niet meer na translateX

[joldemans]

Hallo,

Ik ben met een webproject bezig waarbij de mobiele versie een slide-in navigatie krijgt. Met een klein regeltje js krijgen de sidebar en de site wrapper een active class en in CSS geef ik de sidebar een tranlateX(0) en sitewrapper een translateX(300). Werkt allemaal prima.

Nu waar het fout gaat. In de sitewrapper zit een bar met daarin wat knoppen, oa om het menu sidebar menu open/dicht te klappen. Deze moet sticky worden zodra ie de top van m'n scherm bereikt. Dit werkt perfect totdat het sidebar open geklapt staat en je gaat scrollen. De posistion: fixed; werkt dan gewoon ineens niet meer.

Na wat research blijkt dat bv ook tweakers hier last van heeft. Zodra je de site op mobile view zet en een van de sidebars open klapt en dan gaat scrollen dan werkt de fixed header niet meer tijdens het scrollen.

Nu heb ik hetzelfde scenario met een margin-left gedaan en dat lijkt wel gewoon te werken.

Met translateX
http://fiddle.jshell.net/xa8Lhqut/1/

Met margin-left
http://fiddle.jshell.net/kw8kLd0s/

[itsleon]

Welke browser gaat het om? Hier op mijn chrome (desktop) werkt je demo namelijk wel gewoon.

[joldemans]

M'n fiddle fork is niet helemaal goed gegaan... heb de eerste even geupdate.

Ik gebruik standaard Chrome, maar safari en FF doen tzelfde

[ Voor 29% gewijzigd door joldemans op 09-04-2015 10:29 ]

[itsleon]

Wat heb je nu precies aangepast aangezien die nu inderdaad niet meer werkt

[joldemans]

Bij
.sidebar.active {
}
.content.active {
}

heb ik de margin-left gecommend, en de translate ge-uncommend

Maar zie waar het fout gaat. Als ik het fixed menu uit de content div haal en deze een aparte active class meegeeft met een translateX erin werkt t wel

http://fiddle.jshell.net/m1kgq9t6/

Nu komt dit wel matig uit want bij de desktop weergave veranderd die box naar wat anders wat binnen de sitewrapper moet zitten.

Denk dat ik maar ff wat moet gaan omgooien.

[eXtreaL]

Wellicht heb je hier iets aan:
http://meyerweb.com/eric/...ents-with-css-transforms/

Het lijkt erop dat wanneer je een transform toepast op een element de onderliggende elementen afhankelijk worden van de parent in plaats van de viewport. Dit verklaart dan ook het gedrag dat een fixed element blijft plakken: hij blijft aan de bovenkant van de container met transform, in jouw geval .content.

Het lijkt erop (zoals je al aangeeft) dat je het beste je fixed elementen uit de container met de transform kunt halen. Hier nog een voorbeeld dat ik ben tegengekomen: http://jsfiddle.net/vishl/wzPSF/

Succes!

[NMe]

Een alternatief kan zijn om van transforms en translations af te blijven en margins te gebruiken. Hoewel dat enigszins hacky is reset je daarmee niet je positioning.

[itsleon]

NMe schreef op donderdag 09 april 2015 @ 10:53:
Een alternatief kan zijn om van transforms en translations af te blijven en margins te gebruiken. Hoewel dat enigszins hacky is reset je daarmee niet je positioning.

Ik ben zelf meer voorstander van left te gebruiken inplaats van margin-left gezien left ongeveer dezelfde functionaliteit heeft als translate. Daarbij duwt margin zich zelf opzij wat weer andere bugs in een later stadium kan opleveren

[NMe]

itsleon schreef op donderdag 09 april 2015 @ 11:26:
[...]

Ik ben zelf meer voorstander van left te gebruiken inplaats van margin-left gezien left ongeveer dezelfde functionaliteit heeft als translate. Daarbij duwt margin zich zelf opzij wat weer andere bugs in een later stadium kan opleveren

Left in plaats van margin-left gebruiken reset je positioning. Als ik de TS goed begrijp wil hij dat juist niet.

[itsleon]

NMe schreef op donderdag 09 april 2015 @ 11:32:
[...]

Left in plaats van margin-left gebruiken reset je positioning. Als ik de TS goed begrijp wil hij dat juist niet.

Nu kan het zijn dat ik daar overheen heb gelezen maar denk dat de TS nu meerdere opties heeft om zijn probleem op te lossen.

[joldemans]

Persoonlijk vind ik dat je met translate een mooiere transition krijgt en margin-left gaf ook een probleem met de overflow-x: scroll;

Maar ik heb t opgelost door de menubar uit de sitewrapper te halen. Blijkbaar gaat het fout wanneer een fixed element in een translateX element zit.

Thanks voor het meedenken allemaal!