I am working on a web site which is very content heavy on some pages. When viewed on older versions of iPad (testing with iPad 3) which have lower memory, the Safari browser will run out of memory and crash when I navigate to these pages. Safari is experiencing memory spikes reaching around 900 MB in total virtual memory during the crash.
After debugging, I have found the main cause of this issue to be the following CSS property used to enable momentum scrolling on the web browser. Removing this CSS property from my style sheets reduces the total virtual memory footprint by approximately 300MB and stabilizes my application.
.class1,
.class2,
.class3
{
-webkit-overflow-scrolling: touch;
}
However, the obvious side effect of removing this CSS style is I lose momentum scrolling on my webpage, and we revert to the native Safari scrolling which is not a very good user experience.
I am looking for a way to enable momentum scrolling on my page, with a smaller memory footprint so my app can run on older versions of tablets.
I noticed this issue is a lot worse with iOS 7 and iOS 6 - I am hoping iOS 8 will resolve this issue and I can push my clients to upgrade as an option.
Is it a known issue that -webkit-overflow-scrolling: touch; is very memory intensive? I could not find very much about this online. I think the issue is when I apply the CSS property to the containing div, it inherits down to all the child elements on the page. I am wondering if I blocked this inheritance to all the child elements if this would help the issue, or if this would break momentum scrolling altogether?
Any advice is much appreciated.
