<!DOCTYPE HTML> <div style="height: 0.43px"></div> <svg width="10" height="10" style="display: block;"> <rect style="fill: none; stroke: #000;" x="1.5" y="1.5" width="7" height="7" /> </svg> Remove the div, and the lines in the SVG are crisp. With the div, the horizontal lines are blurry, because we're rendering the SVG at subpixel offset from the top of the page. Instead, perhaps the SVG should snap to pixels so that if the content of the SVG puts edges on integer coordinates, they actually get drawn that way. <roc> where we calculate the viewport box for an nsSVGOuterSVGFrame, we can snap it to pixels there The issue seems to affect <object> as well.
I have found that IE 9 and FF (13) still have this issue. There is a work around I read about that involved using getScreenCTM() to get the fraction of a pixel the root <svg> element is off by. Using relative positioning left/top you can shift the <svg> element up and left a bit to align SVG to the whole pixel boundaries.
Created attachment 612899 [details] Demo of the subpixel problem & workaround
Created attachment 8636669 [details] original testcase (with typo in <title>, oops) (Here's the testcase from comment 0, with a descriptive title added, FWIW. I still see this bug in current Nightly.)
Created attachment 8636671 [details] original testcase
Created attachment 8636674 [details] testcase 3 Here's another testcase from a www-svg thread (simplified slightly to not use <object>). May depend on exact fonts/font-sizes, too, since it's relying on the <h1> to give our SVG the fractional pixel-offset. https://lists.w3.org/Archives/Public/www-svg/2015Jul/0029.html
Yes, this prevents me from doing a design that is composed from SVG blocks on Firefox.
I just ran into this with a small rectangular icon that got very blurry when positioning it since it was being pushed down by rational pixels due to em-based line heights. Are there any plans on fixing this? Firefox appears to be the only browser that has this issue; even Internet Explorer aligns SVGs properly on full pixels.
I hit this pretty frequently on GitHub, too, e.g. on the smiley emoticon menu at the top-right of each comment (if you're logged in) at https://github.com/w3c/fxtf-drafts/issues/126 -- those often have a flattened top-head for me, due to this bug. (This fixes itself if you add "will-change: transform" to the "octicon" class, or any affected <svg> element -- that forces it to be a layer, which makes it pixel-snapped as a side effect. That's overkill and we don't actually want to suggest that as a fix, because layers are expensive.) I'd like to see us fix this. Based on the roc quote in comment 0, it sounds like it may not be too difficult.
Created attachment 8856714 [details] screenshot of bug on GitHub (Here's a screenshot of what this looks like at the top right of some GitHub comments. This is taken on a desktop machine running Ubuntu 16.04. Note for people testing using retina Mac displays: I wouldn't be surprised if this is harder to trigger there, due to higher physical pixel density.)
Another short test case for this bug with simple small SVG: Screenshot: http://simplesvg.com/test/blur-bug.png Test page: http://simplesvg.com/test/blur-bug.html Left edge of SVG is blurred. Workaround for issue is to add style="transform: rotate(360deg)", shown in second sample on that page.
(In reply to CyberAlien from comment #12) > Workaround for issue is to add style="transform: rotate(360deg)", > shown in second sample on that page. Uhh, that’s nice. That will be a lot easier than listening to resize events and checking the bounding box to see whether the element is positioned on a half-pixel… ^^" – Thanks for that!