UI issue. Un usable on mobile

[clembo590]

Hello.
I wanted to start a website using this starter that looked perfect on my laptop.
However on my iphone 8. (ios 12.4)
with chrome 69.0.3497.91
(I do not see the issue on safari...)
Look at the picture: the website is not usable...

I tried also in incognito mode and got the same result....
Hopefully someone can fix it...?

[tomastrajan]

Hi @clembou590 !

Thx, for the feedback ! Interesting, can you please try to disable animations in the settings ? by passing it settings url directly so maybe that page is not too broken and then try to reload main page without settings ?

[echol]

@tomastrajan Unfortunately I encountered this issue too. Just today I uploaded my own project that I was developing using your starter kit, this only happens on iPhone devices. It's such a shame cause this is really a good starter pack. I guess it's got something to do with CSS on iOS devices. Please update here if anyone finds any fix. I'll try and do some research myself.

[clembo590]

@tomastrajan
I disable the animations in the code in AnimationsService.ts
I wrote "NONE" and it worked...

So now how to solve the issue for real? (disabling the animation is not really a good way to handle this right...)

I also tried on the new iphone Xs of my brother and it has the same problem. I also got it on my ipad-pro...

[tomastrajan]

@clembou590 as a first step you could add logic that disables animations only on affected devices / user agents but yeah I fully agree that a proper solution would be better... Hard to say what is the problem as it mostly works and uses standard angular animations and css, hmm...

[davideas]

I see the effect is actually very similar in Edge too, I suspect the cause is the same described in #495 with position: fixed. The reason is unknown to me.

[dyingangel666]

Reason comes from the routeAnimations. There's a prop "position: fixed" which is not removed for Safari and Microsoft Browsers. Why? I don't know, but it might be possible that this is an angular bug. I haven't found a way to fix it and keep the animations work as well.

[dyingangel666]

PR is open ;) Tested Chrome, Firefox, Safari, Edge and IE11