Pozdrav
Prije svega evo Codepen:
Radim offscreen menu, sve radi ok, ali taj offcreen menu ne mogu nikako fiksirati - pokusao sam i important dodati, jednostavno ne pije vode.
Koristim foundation, i sorry na CSS kodu, kopirao sam compiled iz SCSS.
Svaka pomoc i ideja je dobrodosla 
Hvala.
Ovo ti je živi nered. Neradi ti zato jer element koji ima transform na sebi se počinje ponašati kao containing block za position fixed element, a ti kad se klikne na gumb daješ wraperu(main element) nekakve transformacije i ovoj off screen navigaciji. Skloni transformacije sa main elementa i onda će ti se ova navigacija ponašati kako treba. Position fixed je inače relativan na viewport preglednika ali kad mu parent element ima transformaciju neke vrste onda on postaje conataing block za djete koje ima position fixed. Refaktoriraj ovo skroz i onda kreni od početka. Meni se ne da sad švragati po ovom ali kroz dev-toolse sam vidio odmah šta je.
Zamisljeno je da se cijeli content pomjeri u lijevo kad je menu otvoren, a kad ne da se vrati.Na koji nacin da pomjerim main element, bez transformacija, ako obrisem ta pravila nista se ne desava ?
U biti moj point je na tome da ovo odradim sa sto manje jQuery-a, tacnije s njim samo injectam klasu u DOM.
Izbaci navigaciju iz main elementa. Nije ti dobro html strukturiran za ovo što želiš postić. Ako je želiš fiksirati s obzirom na viewport onda je moraš izbaciti jer čim trigeraš transformacije s jqueryem na main elementu onda više navigacija neće biti fiksirana s obzirom na viewport nego relativno na main element.
To sam i mislio da trebam uraditi, ali htio sam da cujem jos neka misljenja.
Hvala
@blaja fixano je bez promjena u markupu.Tacnije, ne koristim transform property vec vrsim pomjeranja, sa right: n; pravilom, jer su i offscreen navigacija i main element relativno pozicionirani, odnosno fixed.
Ono sto je mali problem, je to da animacija nije bas smooth kao sto je bila sa transform property-om.
Neka ideja ?
Probaj sa will-change trigerati da GPU odradi posao.
Znači na element kojem mijenjaš svojstvo stavi will-change: right; na primjer i onda bi to trebalo biti smooth.
will-change ne radi u dosta preglednika pa kao fallback stavi transform: translateZ(0).
Znači na element koji će se u budućnosti potencijalno micati bilo da će to okinuti JS ili CSS staviš
will-change: svojstvo-koje-će-se-mijenjati; i kao fallback za starije preglednike transform: translateZ(0);
S ovim bi trebalo biti brže, ali treba testirati to na mobitelima pogotovo onim malo starijim.
Najbolje bi bilo s transformacijama to odradi ali pošto ti se neda dirat html onda bi ovo trebalo odradit posao. Ali testiraj.
Steta sto nije podrzano u vise Browsera.
U Chrome, zadnja verzija, radi odlicno(mada u njemu i bez will-change radi korektno), dok u Safari ne pije vode.
Firefox nisam ni testirao, mada mislim da bi trebalo biti podrzano.
Firefox, Chrome, Opera i Safari podržavaju, s tim da u Safariu radi samo na zadnjoj verziji.
Na čemu si testirao desktop ili mobitel ?
Ne znam na Safari izgleda da ne radi, zadnja verzija je u pitanju na OSX El Capitan 10.11.4
Zadnja verzija je 10.11.5 prije par dana mi je došao update i na njemu safari prepoznaje will-change. Moguće da na toj verziji na kojoj si ti ne prepoznaje.
Hm moguce.
Vidio sam neki update, ali sam odgodio, budem uradio kasnije, pa cu bas da provjerim.
