Je zoomt in op een webpagina. De tekst wordt groter. En dan — halverwege een zin — houdt de tekst op. Alsof iemand de rest heeft afgeknipt.
Geen scrollbar. Geen indicatie dat er meer tekst is. Het is gewoon weg.
De boosdoener: overflow: hidden.
Dit CSS-property is bedoeld om content die buiten een container valt te verbergen. Handig voor decoratieve effecten. Maar dodelijk voor leesbaarheid bij inzoomen.
Bij 100% zoom zie je het probleem niet. Bij 200% misschien ook niet. Maar bij 400% valt de tekst buiten de container en verdwijnt die stilletjes uit beeld.
Twee opties:
- Laat de container meegroeien:
overflow: visible - Sta scrollen toe als het niet anders kan:
overflow-x: auto
/* Niet doen */
.container { overflow: hidden; }
/* Wel doen — container groeit mee */
.container { overflow: visible; }
/* Of — scrollbar als fallback */
.container { overflow-x: auto; }
Hoe vind je dit?
Zoom in tot 400% en lees de pagina door. Verdwijnt er tekst? Open de DevTools, inspecteer de container en check de overflow-waarde.
Het vervelende aan dit probleem: je vindt het alleen als je test. Geen geautomatiseerde tool pikt dit op.
