I’ve created a single image fullscreen slider that works well on desktop. It stays fixed and page scrolls fine. But on mobile devices, the image scrolls with the page and does not retain a fixed position. I’ve tried some adjustments in Quick CSS but it either has no effect or ends up breaking other elements. Any ideas?
Hey jaybarr,
Thank you for using Enfold.
The background attachment “fixed” is partially supported on iOS and is not supported on Android, which is why it’s not working on mobile devices. Unfortunately, we can’t do much about it.
// https://caniuse.com/#feat=background-attachment
KNOWN ISSUES
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details
Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
Firefox does not appear to support the local value when applied on a textarea element.
You can set the will-change property to transform but I’m not sure if that’s going to help.
div[data-image_attachment="fixed"] {
will-change: transform;
}
Best regards,
Ismael
Thanks, Ismael! I’ll give your snippet a try, but mainly I guess I’ll keep rooting for browser updates. :)