If you pin a full-height section with GSAP ScrollTrigger and its background is a different colour from the page, you might get this: a one pixel line of the page colour showing through at the top or bottom, right as the section docks.

I had it on the Wispr Flow site. A dark green section pinning over a cream page, and a cream hairline flashing at the top.

Why it happens

The pin lands on a fraction of a pixel. The section is exactly one viewport tall, so if it sits half a pixel low, half a pixel of page shows above it. On a green on green layout you would never see it. On green on cream it's all you see.

Fix one: be slightly too tall

Instead of 100vh, the pinned section is two pixels taller:

.pinned-section {  height: calc(100vh + 2px);
}


Use calc, not a pixel value you measured in JavaScript. ScrollTrigger remembers the section's original height and puts it back on every refresh, so a measured number goes stale the moment someone resizes the window. Mine did, and cropped the content.

Fix two: cover the top

For the top edge I added a thin fixed strip in the section's colour, at the very top of the viewport, under the nav. It is only visible while the section is docked. Hidden on the way in, hidden on release.

It feels like cheating. It is also invisible and it works.

Also worth turning on

ScrollTrigger.create({
 trigger: section,
 pin: true,
 anticipatePin: 1,
});


anticipatePin starts the pin a touch early when you scroll fast, which hides the little jump you sometimes get at the moment of pinning.

Later a second pinned section on the same page showed the same seam, and the same three things fixed it. So now it's just my recipe.

‍

‍