Menu bar transition isn't working on some device

[fabiofrl]

Hi Armin,
I've a small issue on my website and I'm wondering if you can help me.

That's the website I'm working on:
http://www.fabiofurlanis.com/

The mobile menu bar opening and closing transition runs smoothly on every desktop browser, and with the majority of mobile devices.

It seems broken when viewed on an iPhone SE, latest iOS and latest Chrome update: it isn't smooth, and it's a bit weird. (btw, same phone, with Safari everything is ok)

It's a simple translateY + ease css transition, but I had the same problem with the defalut Laytheme menu bar animation. If it can helps, everything was working well before the last couple of days.

Any suggestions?
Thank you very much!

F

[mariusjopen]

@fabiofrl
on my iPhone SE simulation on Browserstack it works fine for Chrome.

Can you send a short video?

Best!

Marius

[fabiofrl]

Hi @mariusjopen

here's a short video.
As you can see there's no transition plus the hamburger icon animation is a bit quirky.

EDIT: of course I've cleaned the browser cache and other navigation data, and the problem is still there :(

Thanks
F

[mariusjopen]

Dear @fabiofrl
this is weird. Because on the iPhones where I tested it, it works fine.
Can you try a different iPhone just to see?

Sorry for asking.

Best!

Marius

[fabiofrl]

Dear @mariusjopen

this is very weird: only my own iPhone seems to be the one with that problem.

All the other people who tested it had absolutely no problems (btw they have newer iPhones).
Maybe something related to this?
I'm just guessing, maybe something about GPUs speed and css animations/transitions - my website also has animations on wobbling links - but at this point I really don't know any workaround.
:(

Thanks!
F

[mariusjopen]

Dear @fabiofrl

if it is ONLY your iPhone I think it might be Cache related. Try a different browser on your phone or an incognito window.

Best!

Marius