HTML, CSS & accessibility
Layouts, forms, browser behavior and accessible interface troubleshooting.
112 troubleshooting guides · Page 2 / 5
How do I stop keyboard focus entering content behind a custom overlay?
Use inert on the background region while the overlay is active, and remove it when closing.
How do I prevent rich HTML from being pasted into a plain-text editor?
Use a textarea when a conventional text editor is sufficient.
Why does a sandboxed iframe display a form but refuse to submit it?
The sandbox starts with restrictions; form submission needs the corresponding allow-forms token.
Why does an offscreen lazy iframe still load immediately in my test?
Lazy loading is a browser optimization hint, not a strict network scheduling contract.
Why is an external download link navigating instead of saving the file?
The download attribute is not a universal cross-origin download override.
How do I open a new tab while preventing access to the opener window?
For an intentional new-tab link, use target="_blank" with rel="noopener" explicitly when you need that contract.
Why does content jump when responsive images finish loading?
Provide intrinsic width and height so the browser can reserve the aspect ratio, then use CSS such as max-width:100% and height:auto for responsive sizing.
Why does the browser download an oversized responsive image despite srcset?
For width-descriptor srcset, sizes tells the browser the expected rendered width.
Why is the page’s hero image delayed even though it is visible immediately?
Do not lazily load a critical above-the-fold image.
Why does an inline SVG crop when resized with CSS?
Check the SVG viewBox against the artwork’s coordinate bounds.
Why does an async script run before the library it depends on?
Async scripts execute when each download is ready, without preserving document order.
Why does a module script fail when I open the HTML file directly from disk?
Module loading uses origin and fetch rules that differ from a simple classic local script.
Why does a mobile page render at desktop width despite responsive CSS?
Include a viewport declaration such as width=device-width, initial-scale=1 in the document head, then check for fixed-width elements that still overflow.
Why does a long RTL filename force a flex row wider than its container?
A flex item’s automatic minimum size can resist shrinking around unbroken content.
Why does a nested flex-column panel expand instead of scrolling?
The flexible child may keep its automatic minimum block size.
Why does a long code block blow out a two-column CSS grid?
A bare 1fr track can retain a content-based minimum.
Why does position:sticky stop working after a parent gets overflow:hidden?
Sticky positioning is tied to its nearest ancestor with a scrolling mechanism, which may be an overflow ancestor you did not intend.
Why does a sticky sidebar in a grid never move?
A stretched grid or flex item can become as tall as its containing area, leaving no sticky travel distance.
Why does z-index:999999 fail to put a tooltip above another section?
z-index is evaluated within stacking contexts.
Why does a fixed toolbar scroll with a transformed card?
A transform on an ancestor can establish the containing block for fixed-position descendants.
Why does overflow-x:hidden unexpectedly make the vertical axis scrollable?
The two overflow axes interact when their specified values are combined.
Why does a 100%-wide input overflow after padding is added?
With content-box, width describes the content box and padding/border add to it.
Why does width:100vw create horizontal scrolling on a desktop page?
Viewport units can include width allocated to a scrollbar, while the content area is narrower.
Why does a 100vh mobile panel hide its bottom button behind browser chrome?
Mobile viewport sizes change with browser UI.
Ask your own question · Sign in to post questions and answers.