Zoom Reflow Tester

WHAT IT DOES

Zoom Reflow Tester is a browser extension that tests how well a webpage reflows when zoomed in, from 100% to 400%. It applies CSS zoom to the page and highlights content that overflows, clips, or becomes inaccessible. The tool detects issues like horizontal overflow, fixed-width elements that don't reflow, hidden overflow clipping, small text, overlapping elements, missing viewport meta tags, and lack of responsive media queries. A detailed report shows the number and severity of issues found, with specific recommendations for each. The tool is ideal for web developers, accessibility testers, QA engineers, and anyone who wants to ensure their pages are accessible at high zoom levels.

WHERE IT RUNS

Zoom Reflow Tester runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, using CSS transform and DOM analysis. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the zoom test. Use the "Zoom" slider to adjust the zoom level from 100% to 400%. The page zoom updates in real time as you move the slider. The "Accessibility Report" section displays a summary of issues found, categorized by severity (High, Medium, Low). Each issue includes a description and a detailed explanation. Click the "Rescan" button to manually refresh the analysis. All settings are saved per website, so your preferences persist across visits.

REAL MECHANISM — WHY THIS WORKS

Most zoom testing tools require manual inspection or separate testing environments. Zoom Reflow Tester uses an automated DOM analysis approach that identifies common zoom-related accessibility issues. The tool applies CSS transform: scale() to the body and html elements to simulate zoom, and then scans the page for issues. It checks for horizontal overflow by comparing the body scroll width against the viewport width, identifies fixed-width elements that exceed 80% of the viewport, detects hidden overflow clipping by comparing scroll height against client height, finds text smaller than 12px, detects overlapping elements using document.elementsFromPoint, checks for viewport meta tags, and detects media queries in stylesheets. Each issue is categorized by severity and displayed in a report with actionable details. The tool also highlights problematic elements on the page with colored outlines. This approach ensures fast, accurate, and fully private zoom reflow testing without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the report. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and zoom level—are saved per domain for a seamless experience.

PLEASE NOTE

Zoom Reflow Tester requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies CSS transform to the page and may affect page layout during testing. The zoom simulation may not perfectly replicate browser zoom behavior. The report is based on common accessibility guidelines and best practices, but results may vary. The tool highlights issues with colored outlines; these are purely visual and do not modify the page content. All settings are stored locally in your browser using GM_setValue. No page content, test data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only tests and reports at your request.