Website Browser Compatibility Checklist: What Should You Test?

A website that looks perfect in Chrome can break silently in Safari. A form won't submit. A font never loads. A checkout button hides behind a layout that collapsed on one screen size. A website browser compatibility checklist is the only reliable way to catch these failures before your customers do — and it needs to check function, not just appearance.

This checklist gives you 36 specific things to test across every browser your visitors use, grouped into 13 categories. For the full walkthrough of how cross-browser testing works — tools, browser/device matrices, and workflow — read our complete cross-browser testing guide first. This post is the checklist you run once that process is set up.

Why a Checklist Beats "Just Looking at It"

Most browser bugs are invisible unless you interact with the page the way a real visitor does. A visual scan catches maybe a third of real compatibility issues — the rest live in form validation, JavaScript event listeners, and CSS that only breaks under specific conditions.

We've audited enough Mumbai business sites to know the pattern: the desktop Chrome view always looks fine because that's what the developer tested in. Problems show up in Safari on an iPhone, or in the Chrome build on a mid-range Android phone with a slower GPU. A written checklist forces you to open each browser and click through every item, instead of trusting a glance.

Browser and Device Coverage Before You Start

Before running any of the checks below, confirm you're testing the right browser and device mix. Skipping this is the single most common reason bugs reach production — a team tests on their own laptop and calls it done.

At minimum, test two OS/browser pairings: a recent iPhone on Safari, and a mid-range Android phone on Chrome or Samsung Internet. Add Firefox or Edge if your analytics show a meaningful audience there — check before you sign off on launch, not after.

1. Navigation and Header

Broken navigation blocks every other page on your site — check it first, in each browser.

• Every top-level menu link goes to the correct page, not a 404
• Dropdown/mega menus open on hover (desktop) and on tap (mobile) — not one or the other
• The mobile hamburger menu opens and closes cleanly, with no leftover overlay blocking clicks
• The logo link returns to the homepage from every page, including nested ones
• Sticky/fixed headers don't overlap page content when you scroll down
• Search icon or search bar (if present) actually opens and accepts input

2. Fonts and Typography

Font loading failures are one of the most common invisible browser bugs — the page renders, but in the wrong typeface, throwing off spacing and sometimes hiding text behind icons that never load.

• Custom/brand fonts actually load — check for a fallback to system fonts (a sign the real font failed)
• Heading sizes stay proportional and don't overflow their container on any browser
• Line height and letter spacing look consistent across Chrome, Safari, and Firefox
• No text is cut off, overlapping, or rendering with unexpected line breaks
• Icon fonts (if used) render as icons, not as random boxes or missing-character glyphs

3. Images and Media

Modern image formats speed up your site but aren't universally supported — an image that loads instantly in Chrome can fail silently in an older Safari version if there's no fallback format.

• Every image loads — no broken-image icons on any tested browser
• WebP/AVIF images have a JPEG/PNG fallback for browsers that don't support the newer format
• Images scale correctly at different screen widths without stretching or distorting
• Lazy-loaded images actually appear as you scroll, not just on manual refresh
• Background images (set via CSS) render on every browser, not just Chrome

4. CSS and Layout

Layout bugs are the most visually obvious but also the most browser-specific — flexbox and grid have inconsistent support for edge cases across engines, especially in older Safari builds.

• Grid and flexbox layouts hold their structure — no columns collapsing or stacking unexpectedly
• Spacing (margin/padding) looks the same across browsers, not just visually close
• Z-index stacking is correct — no elements appearing behind ones they should sit in front of
• Border-radius, shadows, and gradients render consistently across engines
• No horizontal scrollbar appears unexpectedly on any browser or screen width

5. Animations and Transitions

CSS and JavaScript animations are where older browsers and low-power devices diverge most from what you tested on your development machine.

• Hover animations trigger correctly on desktop and degrade gracefully on touch devices
• Scroll-triggered animations fire at the right point on every browser, not just Chrome
• Page transitions don't cause flickering or layout jumps
• No animation blocks or delays interaction with the element underneath it

6. JavaScript Functionality

JavaScript errors are the most damaging class of browser bug because they can silently break interactive elements with zero visual warning. A button can look perfectly clickable and simply do nothing.

• Open the browser console on each tested browser and confirm zero JavaScript errors on page load
• Every button and interactive element actually fires its intended action
• Third-party scripts (chat widgets, analytics, tracking pixels) load without throwing console errors
• Accordion/tab components expand and collapse correctly
• Modals open and close, and the page behind them doesn't stay locked from scrolling

7. Forms

Forms are the single highest-value item on this checklist for a lead-generation business — a broken form on any browser is a lost enquiry you'll never know you missed.

1. Submit each form on every tested browser and confirm it actually reaches the server (check for a success message or redirect)
2. Required-field validation triggers correctly and shows a visible error message
3. Email and phone field validation accepts valid formats and rejects invalid ones consistently
4. Date pickers and dropdown selects render as native controls correctly on mobile Safari and Chrome
5. File upload fields (if present) work and show the selected filename
6. Autofill doesn't break field styling or push labels out of alignment

8. Dropdowns and Popups

Popups and dropdown overlays depend heavily on JavaScript event handling, which is exactly where cross-browser inconsistencies concentrate.

• Exit-intent or timed popups trigger correctly and don't fire repeatedly on every page load
• Popup close buttons work with both a click and the escape key
• Dropdown selects (product variants, filters, country codes) open and register a selection correctly
• Cookie-consent banners render above other content and don't block navigation

9. Sticky Elements

Sticky headers, footers, and CTA bars are a frequent source of overlap bugs because their positioning behaves slightly differently across rendering engines, especially on iOS Safari's dynamic toolbar.

• Sticky header or CTA bar stays fixed correctly while scrolling on both desktop and mobile
• Sticky elements don't cover form fields, buttons, or text when the on-screen keyboard opens
• WhatsApp or chat-widget floating buttons stay in a consistent position and don't overlap page content
• Sticky elements don't reappear or disappear erratically during fast scrolling on mobile Safari

10. Cookies and Consent

Cookie and privacy behaviour is increasingly browser-specific — Safari's Intelligent Tracking Prevention treats third-party cookies differently from Chrome, which can silently break login persistence or analytics.

• Login sessions persist correctly after refresh on every tested browser
• Cart contents (for ecommerce sites) survive a page reload on Safari, not just Chrome
• Analytics events actually register in GA4 real-time reports across browsers, not just the one you developed in
• Consent banner choices are remembered and don't reappear on every page load

11. Videos

Autoplay and inline-playback rules differ between browsers — a video that autoplays fine in Chrome can fail entirely on mobile Safari.

• Embedded videos load and play on every tested browser
• Autoplay behaviour matches expectations — remember that most mobile browsers block autoplay with sound
• Video controls (play, pause, mute, fullscreen) function correctly on touch devices
• Video thumbnails/poster images display before playback starts, not a blank black box

12. Payments, Login, and Search

These checks sit directly between a visitor and revenue or account access — the highest-consequence category on this list.

1. Payment gateway iframes (Razorpay, Stripe, etc.) load and accept input on every browser
2. Card-entry fields format numbers correctly and don't block valid card types
3. Login and signup forms authenticate correctly, with error messages showing for wrong credentials
4. Password-visibility toggle icons work consistently across browsers
5. On-site search returns results and doesn't throw a blank page on any tested browser
6. Search autocomplete/suggestions render without layout shift pushing other content around

Running through this checklist manually across five browsers takes real time — and it's easy to miss something when you're doing it alone. Our team runs full pre-launch QA on every site we build, checking every item above against real devices, not just emulators.

13. Responsive Layouts and Touch Interactions

A responsive layout that passes on desktop Chrome's device-emulation mode can still fail on a real device — emulation approximates screen size but not real touch behaviour or browser engine quirks. Our breakpoints and layout testing guide covers this gap in more depth.

• Test on at least one real phone, not just browser dev-tools device emulation — see our mobile UX testing workflow for a device-matrix approach
• Tap targets (buttons, links) are large enough to tap accurately without mis-taps — 44×44px is the accepted minimum
• Pinch-to-zoom and double-tap-to-zoom don't break layout or trigger unintended actions
• Landscape and portrait orientation both render correctly without content cut off
• Swipeable carousels or sliders respond correctly to touch gestures, not just click-and-drag

How Often Should You Run This Checklist?

Run this checklist at three points: before launch, after any major redesign, and after a browser's major version update rolls out to most of your traffic. Browsers update automatically for most users, so a CSS property your site depends on can start behaving differently overnight — with no code change on your end.

A quarterly spot-check on your three highest-traffic browsers, pulled from your GA4 breakdown, catches drift before it becomes a support ticket. Pair this checklist with 9 hidden reasons your website is slow or our Core Web Vitals fix checklist if speed is also a concern — a rendering bug and a performance regression often get reported by users as the same complaint: "the site feels broken."

Key statistics

• Safari holds roughly 21% of global mobile browser market share as of mid-2026, second only to Chrome, making WebKit-specific testing non-optional for any India-facing business site, per StatCounter Global Stats mobile browser market share report.
• Chrome's own User Experience Report tracks Core Web Vitals separately by browser and device segment, meaning a page that passes real-user thresholds in one browser's data can still fail in another's, per Chrome UX Report documentation.
• Samsung Internet ships as the default browser on the majority of Samsung Android devices, a significant share of the Indian smartphone market, and renders with its own engine quirks distinct from stock Chrome, per StatCounter India mobile browser market share.

Frequently Asked Questions

What is the most important item on a browser compatibility checklist?

Form submissions matter most to test on every browser. A broken form on a single browser is a lost enquiry that never shows up as an error — it just looks like a visitor who left without converting.

How many browsers should a small business website actually test on?

Test on at least three: Chrome, Safari, and one Android-default browser like Samsung Internet. These three cover the large majority of real visitor traffic for most Indian business websites, based on typical GA4 browser breakdowns.

Can I rely on browser dev-tools device emulation instead of testing real devices?

Emulation is a useful first pass but not a substitute. It approximates screen size correctly but doesn't replicate real touch behaviour, rendering-engine quirks, or how a page performs on a slower mobile processor.

Do I need to test on Internet Explorer or old browser versions?

No — Microsoft fully retired Internet Explorer, and it carries negligible traffic on any modern Indian business site. Focus your testing budget on current Chrome, Safari, Samsung Internet, Firefox, and Edge instead.

How long does running this full checklist take?

A single full pass across three priority browsers typically takes 45–90 minutes for a standard business site. Complex ecommerce or booking sites with payment flows take longer, since each transaction path needs its own full test.

Reference reading

• StatCounter Global Stats: worldwide browser market share tracker
• MDN Web Docs: CSS reference and browser compatibility tables
• web.dev: understanding Core Web Vitals across browsers and devices

Watch: Cross Browser Testing - Ultimate Guide (Start to Finish) [With Checklist]

Watch on YouTube: Cross Browser Testing - Ultimate Guide (Start to Finish) [With Checklist] — The Testing Academy

Want a second set of eyes on your site before it goes live, or a faster site that passes this checklist without the guesswork? We build and test every site we design for real cross-browser reliability, not just a Chrome preview.