Fixed Scroll Not Working on Mobile - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
February 20, 2020 at 6:27 pm #1186450

suzpolo
Participant

Hi,
I am trying to get this effect to work on my Contact page. It currently works great on desktop, but not on phone or tablet. Any fixes?
Here’s a gif of what I want it to look like – this is the “mobile” view on my desktop. But when you access it on an actual phone or tablet, there is no fixed scroll.

February 24, 2020 at 12:09 pm #1187274
Nikko
Inactive Moderator
Hey suzpolo,

Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:
```
@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  .responsive #top #main {
    padding-top: 112px !important;
  }
}
```
Best regards,
Nikko
February 25, 2020 at 6:17 pm #1187806

suzpolo
Participant

Hi! The issue isn’t the mobile scroll – it’s that the image in the background (beach scene) on mobile does not stay fixed as the content scrolls. Is there code/a fix for that? The gif is how I want it to behave on mobile (phone/tablet). Right now it is only behaving that way on desktop.

Thank you!

February 28, 2020 at 5:42 am #1188713

Nikko
Inactive Moderator

Hi suzpolo,

We apologize for the delayed response.
The background-attachment fixed is disabled in ios devices.
This has been quoted as the reason why it’s disabled:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

– https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios
Here are some supporting statements but you can find some of their suggestions as some hack/tweak into that behavior:
– https://www.joomshaper.com/forums/background-fixed-image-on-ios-mobile-devices
– https://css-tricks.com/forums/topic/background-attachmentfixed-not-working-on-mobile/

Best regards,
Nikko
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.