Adding a z-index was a hack to workaround the .rotate180 class creating a new stacking context, causing downvotes to be rendered over the sticky topbar. This is

Adding a z-index was a hack to workaround the .rotate180 class creating a new stacking context, causing downvotes to be rendered over the sticky topbar. This is hella overengineered. https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg is 131 bytes! <svg height="32" viewBox="0 0 32 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m2 27 14-29 14 29z" fill="#999"/></svg> Meanwhile, the relevant section of https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css is much larger: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } Just having a separate triangleup.svg and triangledown.svg would save bandwidth and rendering time, and make naïvely-written userstyles work properly! I thought Hacker News, of all websites, would be free from dodgy overengineered CSS…