Reputation: 826
I am working on an infographic with sliding carousel <li>
s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?
URL: http://weaver-wp.weavertest.com/radiation-infographic/
Upvotes: 3
Views: 5408
Reputation: 20015
Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.
Upvotes: 0
Reputation: 303460
You are zooming your SVG file to a very large size:
background-size: 9730px 30000px;
background-position: -7310px -29250px;
Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.
The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.
Upvotes: 5