The template library now runs at sixty frames a second on a phone
Scrolling the library on a phone stuttered. It turned out to be two separate things, only one of which any desktop browser would ever show you.
Three cards were rendering a 3D scene each
Three templates carry an extruded word rather than painted text, and the card previewing them was running the whole scene live: the geometry, a bloom pass over it, a readback of the frame's own pixels, and a copy onto the card — sixty times a second, for each of them, while you scrolled past.
Measured on an emulated iPhone with the processor throttled, the library ran at 1.5 to 3.2 frames a second wherever those three cards were on screen, and at sixty everywhere else. The cards were also drawing the scene 940 pixels wide to show it 217 wide, which is four times too many pixels in each direction.
A card holds its 3D still now and draws it at the size it is shown. Same positions afterwards: 59 to 60 frames a second. The editor and the export are untouched — that is where a scene is meant to move.
And two were bending light through an SVG filter
The first and third cards in the library carry lensed glass: the backdrop behind the pane is refracted before it is blurred, which is a displacement map applied to whatever happens to be behind it. Chrome composites that on the GPU and never notices. WebKit rasterises it on the processor.
That is why it took a report from an actual phone to find. Every measurement on a desktop said the top of the library was clean at sixty frames a second — three times over. The stutter ran from the first card until the second lensed one left the screen, and those two are the only lensed cards in the whole top of the library.
A card gets frosted glass without the bend now. The sheen, the rim and the blur all stay, and at three hundred pixels wide the refraction was under a pixel anyway — before and after screenshots are indistinguishable.
Why this is worth a post
Because the lesson is not about glass. It is that a measurement on the wrong machine is worse than no measurement: it is confident, it is repeatable, and it points away from the problem. The thing that solved it was somebody saying which card was on screen when the stuttering stopped.