RF-04 · Overlapping text
Check at 1280px / 400%, then 390px, then 320px
Overlapping text boxes
The second of the two biggest blockers, and the harder one to spot. Two text boxes placed at fixed coordinates do not know about each other. Narrow the space, the upper one grows taller, and it prints straight over the one below.
Look for
Two lines of type printed on top of each other, a heading crossing into a paragraph, or text that becomes unreadable mush at 400% zoom.
A · Expected pass
Blocks stacked in flow, so each one pushes the next further down.
Upper block
This block sits in normal flow. As the canvas narrows it needs more lines, it grows taller, and the block beneath it is pushed down by exactly that amount. The two never meet, at any width or zoom level, because neither one is pinned to a coordinate.
Lower block
And this one keeps its own room in turn. Both boxes are bordered so a tester can see the edges move apart rather than through one another.
B · Known risk
Two boxes pinned to fixed coordinates in a fixed-height stage.
Upper box, pinned 24 pixels from the top of the stage. At the desktop width this is two comfortable lines. Narrow the canvas and it becomes six, eight, twelve lines, and every one of them is drawn downward from that same fixed starting point.
Lower box, pinned 150 pixels from the top and shown in red. It has no idea the box above it has grown, so the two sets of words are printed straight through one another and neither can be read.