Absolute element bugs around the screen on real device mobile

Hi,

I got an iPhone positioned absolute. On desktop and tablet it has a loading animation. I disabled this on mobile. It behaves correct on desktop and in the mobile view on Webflow it works as well. See here: Link.

On my actual phone, though, it bugs up and glitches around the screen when scrolling. In an erratic behaviour.

What is causing this and how can I fix it?

I’m testing on iPhone 5S.

I hope this can be fixed as soon as possible.

E


Here is my site Read-Only: Read only

Hello @EmilVillumsen,

It could be that the OS on your iPhone 5S is not updated, try it on a different phones, like a newer version to see if it works. Or, you can download the chrome app on your iphone 5s and test it there. I hope this helps.

Hi Pablo,

I’ll try update now.

Even so, though, having a glitch messing up the site for all users who haven’t got the latest update isn’t sustainable huh? Can you replicate the error on the landing page?

Just had my client check it on his Samsung and the error is there as well

@EmilVillumsen, I cant see the actual problem, can you post the link for the published site.

It’s here https://arbejd-dot-com.webflow.io/ on the landing page as you scroll down over the green section and further

It’s only on real devices (not Inspector in Chrome and in mobile view in Webflow)

@EmilVillumsen, I see the problems now. What you can do is to set the mobile div to position absolute instead of position fixed and test it again. Now, you will have to see what container you put mobile on to fit your design. Another thing to try could be hide mobile all together on mobile. Let me know if the first option works.

The position is absolute, not fixed. And of course I’d like to keep the element on mobile, it’s a part of the design

@EmilVillumsen, yes I understand it is part of your design, but you can hide the phone that is giving you problems on mobile, and replace it with a new simpler png positioned at the same position that your old phone is placed. Now I am talking about your mobile div, it is position fixed, and I didn’t look too close at your design, but I think that is what is causing the problem on cell phones, the phone picture follows your while scrolling. Maybe try to change that to position absolute. Good luck.

1 Like

Hi @EmilVillumsen

I did some testing and it looks like you have part of the mobile element set to a fixed position:
CloudApp

This is likely the culprit — can you try setting that to position: static to then publish to see if this helps?

EDIT: Yes what @Pablo_Cortes said :smiley:

1 Like

Aha, there was indeed a position fixed in the sub-div. Wonder why it only took effect on the actual device and not in Webflow.

Regardless, it’s fixed! (no pun;)) Thanks for helping out

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.