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:
and if you want to show the element, just set the values to 0:
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!