Safe-area smudges in scrolled lists

Scrolling a list, a tiny decorative view suddenly renders as a smear: a 2×2 status dot stretched into a tall pill, a 1px divider inflated into a full gray band, a row background bleeding past its card. It only happens at certain scroll offsets, near the bottom (or top) of the screen, and fixes itself when you keep scrolling — which makes it look like a paint glitch. It isn't.

Load-time variant: the same mechanism fires before any scrolling. If a card/list container's bottom edge lands near the safe-area boundary at initial layout (short content, or the last card on the page), iOS expands the container down to the physical screen edge — the card renders with a long empty band at its bottom, as if it had huge trailing padding.

The cause

NativeScript's iOS safe-area expansion applies to every view whose laid-out edge touches a safe-area boundary, not just page-level containers. That behavior is exactly right for the scroll viewport (see ns-ios-scroll-under-bars — content should flow under floating chrome). But scroll content moves: any row, dot, or divider can momentarily land with its edge on the boundary line. When it does, iOS-side layout expands that innocent view to the physical screen edge — and a 1px divider "expanded to the edge" is a giant band. The smaller and thinner the view, the more grotesque the artifact, which is why dots and hairline dividers are the usual victims.

The fix

Set iosOverflowSafeArea="false" on the small views inside scroll content — never on the scroll container itself: