How do I determine what's causing "Styles Invalidated" in iOS Safari?

Question

I'm chasing down a performance issue when scrolling on iOS. On both touchstart and touchend, Safari is invalidating and then recalculating styles, which results in a slight delay before scrolling responds. Safari's tools have an "initiator" column, but it is blank in my tests.

I've tried:

• Applying either will-change: transform; or transform: translateZ(0); on the scrolling element. This helped immensely on Chrome, but does nothing for iOS Safari. The profiler still reports that styles are being recalculated.
• Removing all elements from the DOM that have position: fixed;
• Inspecting each line of Javascript (which was just jQuery and Angular core code in my tests) reported by the profiler to see if they are in Paul Irish's list of things that force layout/reflow
• To reproduce it on Android so I could use Chrome's stellar dev tools, without success. The issue only affects iOS Safari, which can only be debugged from desktop Safari.

How can I determine what is causing my styles to be invalidated in iOS Safari?

Answer 1

This worked for me when I debugged a similar issue.

1. Get the start time of the event you want to look into. Should be on the second to last column when in the view from your screenshot.
2. Click on the tab next to the "Events" tab, named "Frames".
3. Look for the frame with the closest matching start time. ( Sometimes it's not exact )
4. Expanding the frame lets you see the events that happened right before/after the event you're looking into. On the last column "Location" you can see where the problem was caused. If it's filled in, you can click on the right arrow to see the line that caused it. BUT it doesn't always have something in the column. I have to then look at the previous events to try to figure out what the problem is.

It's not perfect, but I've been able to debug the problems I've ran into with this method. Hope this helps!