Iâd like to welcome Dave from Webflow Support. To just briefly catch up:
- There are zero divs set to
position:fixed
anywhere on the page.
- There are zero interactions anywhere on the page.
- This has nothing to do with the network, batched requests, HTTP latency, preloaders, etc. These issues occur after the page has loaded. Stutters while the page loads are 100% normal.
I was able to run significant testing directly on iOS Safari (not Chrome, not MacOS Safari, etc.) and I discovered key answers to this stutter. First, it is 100% reproducible and 100% throwing errors from Webflowâs JavaScript. Second, the bug is always present when using SVG, even on new projects, but the severity of the stutter is less on new projects. Finally, the bug is directly tied to code line 8037, dealing with w-lightbox
, w-lightbox-content
, and w-lightbox-view
. (âŚmeanwhile zero lightboxes used on this page).
In conclusion, Iâve found a lot of clues, but the actual resolution will need to be from Webflow properly as Iâm wading out of my depth, trying to analyze this multi-thousand line JavaScript file.
Screenshot 1: scrolling through the page; one red notch under layout & rendering = one stutter
Iâve zoomed into a single stutter event at 2.13s. Anything with width 414px & height 512px = thatâs the SVG. The problem is, during scrolling, the styles are recalculated, the layout is invalidated, and a re-paint has been ordered. Thatâs no goodâŚwhy? Why is the CSS changing on scroll? Why is the layout being invalidated on scroll? Those will answer why a repaint has been done.
Screenshot 2: whatâs triggering the CSS styles to be invalidated?
They consistently reference
webflow.573bd23e0.js:8037
. The
JavaScript file can be opened here, but Iâve copied the relevant unminified section below:
Screenshot 3: line 8037 in Webflowâs JavaScript?
, function() {
var n=t.navigator.userAgent, r=n.match(/(iPhone|iPad|iPod);
[^OS]*OS (\d)/);
if(n.indexOf("Android ")>-1&&-1===n.indexOf("Chrome")||r&&!(r[2]>7)) {
var i=e.createElement("style");
e.head.appendChild(i), t.addEventListener("resize", o, !0), o()
}
function o() {
var e=t.innerHeight, n=t.innerWidth, r=".w-lightbox-content, .w-lightbox-view, .w-lightbox-view:before {height:"+e+"px}.w-lightbox-view {width:"+n+"px}.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {height:"+.86*e+"px}.w-lightbox-image {max-width:"+n+"px;max-height:"+e+"px}.w-lightbox-group .w-lightbox-image {max-height:"+.86*e+"px}.w-lightbox-strip {padding: 0 "+.01*e+"px}.w-lightbox-item {width:"+.1*e+"px;padding:"+.02*e+"px "+.01*e+"px}.w-lightbox-thumbnail {height:"+.1*e+"px}@media (min-width: 768px) {.w-lightbox-content, .w-lightbox-view, .w-lightbox-view:before {height:"+.96*e+"px}.w-lightbox-content {margin-top:"+.02*e+"px}.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {height:"+.84*e+"px}.w-lightbox-image {max-width:"+.96*n+"px;max-height:"+.96*e+"px}.w-lightbox-group .w-lightbox-image {max-width:"+.823*n+"px;max-height:"+.84*e+"px}}";
i.textContent=r
}
}
(), h
Iâve no idea what this code does, what itâs doing that needlessly causes layout invalidations and SVG repaints, nor what can be done to prevent the stutters itâs ostensibly causing.
However, I can illustrate the effect itâs having:
Screenshot 4: big frametime stutters, from 1ms average to suddenly 14+ms spikes
Screenshot 5: from loading the pageânote all the network requests at the beginningâto the continuous layout invalidation and CSS recalculation
Screenshot 6: every style recalculation can be matched to a stutter (10.81s highlighted)
Screenshot 7: and every dang time, itâs the same line in the same Webflow JavaScript: webflow.573db23e0.js:8037
Screenshot 8: in a brand-new project, Iâve duplicated the page. The error, bug, and stutters STILL exist, but to a lesser degree. The stutter is easily noticeable, but not as egregious as the original project. No explanation, but my only guess is that the initial project actually has CSS classes, all of which may need to be re-parsed when the styles are invalidated:
Screenshot 9: the insane CPU usage spikes when scrolling on such a basic page, when the CSS is invalidated, the layout is recalculated, all triggering a re-paint
Screenshot 10: somehow, CodePenâs page does NOT show the same issues: no recalc, no invalidation, no repaint