So my site uses interactions to fade in fixed full screen backgrounds for each section of the page. It’s a pretty cool effect, and works great on desktop and even mobile.
However on my latest gen iPad in Safari, the background fades simply don’t happen. As I scroll there’s no background at all, and as soon as I stop they ‘pop’ in… no fading.
I’m thinking this is a performance thing, but it’s not an old iPad.
PLEASE any help is hugely appreciated. Thanks!
Sorry, your website is password-protected.
Oops, fixed. Thanks!
@helmsmith, would you mind generating a new public share link? When visiting over here, this is the screen that’s coming up:
Try this. Thanks for your patience… LMK what you find!
https://preview.webflow.com/preview/heco?preview=5844e4cc861f8f7ff25fe00269d8fc07
Not a problem! Can confirm the issue on iPad Air, but seems to work perfectly on the iPad Pro 9.7. On the Air, it seems to start right around section-bios. Because the code is identical for the two devices, it would seem to point to an issue with rendering on the device itself. Can you confirm the iPad you’re using to test?
Edit: I see you said “latest gen” in your original post, but because Apple now sells many different models, this could help us narrow it down. 
Yep, It’s an iPad Air 2.
Can confirm it’s happening on the Air 2 over here as well, even in Xcode Emulator. 
No idea why this would happen on the Air and Air 2 but not the 9.7" Pro.
Just a nudge to see if anyone else has suggestions. Thanks!
So I think I found the fix, just in case anyone else has the issue in the future. Here’s where I found details.
There’s a fix about how iOS doesn’t trigger hardware acceleration on certain transition properties, especially overlapping elements, which is a cause for bad performance… and all of my fixed background elements are overlapping.
BUT the primary thing that seemed to save me is this bit:
Avoid changes between ‘display: none;’ and ‘display: something;’
Changing the display-state on iOS is like adding or removing an element to and from the DOM and is therefor a very heady calculation depending on how many items you have in your DOM that can easyly cause the UI to freeze for a second or more.
How to fix it:
Instead of using the display-property, use the tranform-property instead, if you want to hide an item you can use something like this: transform:
translate(100000px,100000px);
and if you want to show the element, just set the values to 0:
translate(0px,0px);
You have to set the ‘position: absolute;’ though. This method needs a little bit more work than using ‘display’, however the performance of your webapp will thank you greatly for that.
I was using display: none to hide my hidden background until the interactions turned them on. iOS doesn’t like that.
Hope that helps somebody!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
