Fixes tagged CSS
4 fixes · back to all fixes
My scoped CSS was correct, the elements were correct, and none of it applied
A tool on this site shipped with every severity dot zero pixels wide and every badge a square block. The stylesheet said otherwise, the markup said otherwise, the page returned 200 and the console was clean. Astro scopes a plain <style> with an attribute it stamps on elements that exist at build time, and everything on that page is built at runtime with innerHTML.
4 min read →
transform on a root <svg> in JSX does nothing, and nothing errors
A rotation prop rendered perfectly and never rotated. transform is an SVG presentation attribute, so it only applies to elements inside an SVG document. On a root <svg> in an HTML tree, the HTML layout box owns the transform and the attribute is dropped.
4 min read →
The hidden attribute stops working when CSS sets display
A modal with the hidden attribute rendered open on every page load and refused to close. The cause: a one-line CSS display rule silently overrides the hidden attribute, and a one-line attribute selector fixes it.
2 min read →
Align card footers to the bottom of a CSS grid with margin-top: auto
Cards in a row hold different amounts of text, so their prices and links sit at ragged heights. Make each card a full-height flex column and give the footer margin-top: auto. It needs no fixed heights or JavaScript.
2 min read →