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.
@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.
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.
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.