Debugging cross-browser layout bugs without guesswork

Cross-browser layout bugs, where a layout works in one browser and breaks in another, are among the most frustrating problems in frontend work. Guessing makes it worse. A repeatable process makes it manageable.

1. Reproduce it reliably

Note the browser, version, device and screen width. If you cannot reproduce it, you cannot confirm the fix.

2. Find the element that is wrong

Open developer tools and inspect the broken area. Compare the computed styles with a working browser. The difference is usually in width, display, or a property the broken browser does not support.

3. Reduce the test case

Remove everything that does not affect the bug: other sections, scripts, unrelated styles. A ten-line reproduction often shows the cause immediately.

4. Check support, then use @supports

Sites like Can I Use show which features each browser supports. If a feature is missing, provide a fallback:

.layout {
	display: flex;
	flex-wrap: wrap;
}

@supports (display: grid) {
	.layout {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

Common culprits

• Viewport height on mobile: 100vh can include the browser toolbar. 100dvh adjusts as the toolbar shows and hides
• Flex items refusing to shrink: add min-width: 0 to the item
• Default styles on form controls that differ between browsers
• Images without explicit width and height causing layout shift

5. Fix the cause, not the symptom

A browser-specific hack might hide the bug today and cause another tomorrow. Once you understand why it broke, the proper fix is usually small.