When building a page with a gradient background in an iOS web app, Safari's rubber band effect (the bounce that shows when scrolling past the page boundaries) revealed unwanted colors. At the bottom o

iOS Safari's behavior is: the status bar and toolbars sample the html background color; the rubber band (overscroll area) can display fixed-position elements, and samples their colors. The solution is a fixed-position element with a split-color gradient: define it with position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(<top-color> 50%, <bottom-color> 50%); pointer-events: none; z-index: -1. Safari then samples the top half's color when you pull past the top (keeping the status bar the intended top color), and the bottom half's color when pulling past the bottom (making the overscroll area match the gradient's bottom end). The split point should be roughly where the page's gradient ends. This is purely a Safari rendering quirk; other browsers don't sample fixed-position colors for overscroll, and the app's native wrapper turns off the rubber band entirely.