Clipped popup content at default browser zoom hides primary actions — Save, Submit, Close — behind invisible overflow. Users on 125% zoom (the OS default on high-DPI Windows laptops and standard for low-vision users covered by WCAG 2.2 SC 1.4.4 Resize Text) hit dead ends where the save button renders below a fixed 200px container with overflow: hidden. The extension appears broken, reviews drop, and uninstalls spike. Accessibility compliance also fails when resized text gets cropped instead of reflowing.
High because clipped controls make the extension functionally unusable for a measurable segment of users at default zoom levels.
Replace fixed heights and overflow: hidden with a bounded, scrollable body. Set an explicit width, cap height with max-height, and let content reflow with overflow-y: auto. In popup.html:
body {
width: 360px;
min-height: 100px;
max-height: 600px;
overflow-y: auto;
box-sizing: border-box;
}
Use rem units for text so browser zoom scales correctly.
ID: extension-ux-performance.popup-responsiveness.popup-zoom-visible
Severity: high
What to look for: Examine popup.html and popup CSS for fixed-width layouts, overflow handling, and minimum or maximum dimensions. Check whether the popup sets explicit width and height via CSS or the manifest default_popup dimensions. Look for content that uses overflow: hidden without overflow: auto or scroll, which would silently clip content. Check whether text uses fixed pixel sizes that might not scale gracefully at 110% or 125% zoom. Count all instances found and enumerate each.
Pass criteria: Popup layout is responsive within its container. A popup width of 300-400px with auto-height or a defined max-height plus scroll covers most content well. Content is not clipped or overflowed invisibly at 100% zoom. Text uses relative units (rem or em) or is sized appropriately.
Fail criteria: Popup layout clips content at default zoom, uses overflow: hidden on the main container causing content to be cut off, or uses a fixed height that causes important controls to be invisible without scrolling and with no scroll affordance.
Skip (N/A) when: The extension has no popup.
Detail on fail: Describe the visibility issue. Example: "Popup sets height: 200px with overflow: hidden — settings panel and save button clipped and inaccessible" or "Fixed-width 500px popup extends beyond typical Chrome popup viewport, right side content unreachable."
Remediation: Use flexible layouts that adapt to content:
/* popup.html body */
body {
width: 360px;
min-height: 100px;
max-height: 600px;
overflow-y: auto;
font-size: 14px;
margin: 0;
padding: 12px;
box-sizing: border-box;
}
Chrome popup windows constrain max width to roughly 800px and max height to the viewport, but content should be explicitly bounded to prevent unexpected clipping.