Blink’s Core Overflow Geometry: Clipping, Visual, and Scrollable Rectangles

The provided text explains Blink’s core overflow geometry system, which uses three specialized rectangles to manage how web content extends beyond its defined boundaries. The OverflowClipRect acts as a visibility mask, defining the precise "viewport" area of an element where content is actually rendered and interactable. In contrast, the VisualOverflowRect—often called ink overflow—captures the total paint area, including decorative effects like shadows and outlines that may bleed outside the box. The ScrollableOverflowRect represents the full extent of the layout content, dictating scrollbar sizes and the range of reachable content through scrolling. Together, these measurements allow the engine to efficiently handle painting, hit-testing, and compositing while maintaining performance across different CSS settings and writing modes. By separating visual decorations from scrollable layout data, Blink ensures that elements display correctly without triggering unnecessary scrollbars or rendering glitches.