Zoomed SVG turns blurry

538 views
Skip to first unread message

Adrian von Gegerfelt

unread,
Jan 12, 2012, 9:19:30 AM1/12/12
to isc...@googlegroups.com
I have this (simplified) layout:

<body>
<div id="map-holder"><!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1">
<rect x="-40.195" y="-21.805" fill="#B2B2B2" width="67" height="67"></rect>
<rect x="38.805" y="-21.805" fill="#B2B2B2" width="87" height="67"></rect>
<rect x="137.805" y="-21.805" fill="#B2B2B2" width="47" height="67"></rect>
<rect x="196.805" y="-21.805" fill="#B2B2B2" width="67" height="67"></rect>
.....
</svg>
</div>
</body>

and with javascript I call:

var mapScroll = new iScroll('map-holder',{
zoom:true,
zoomMax:4});

When I pinch-zoom on an iPad, the SVG image gets stretched.

But if I skip iScroll and test chaining the webkit-transform property:

$("#Layer_1").css('-webkit-transform','scale(2)');

the SVG image gets twice as large, but sharp.

How do I make this work with iScroll?

p.pi...@juni.com

unread,
Nov 14, 2013, 9:07:22 AM11/14/13
to isc...@googlegroups.com
bump ! i got the same Problem and would like to know how to Scale an SVG without loosing Quality. I put the iscoll div wrapper around the svg element or an iframe including an svg and the svg gets very blurry.

best regards

philippe

James Coleman

unread,
Feb 26, 2014, 10:46:01 PM2/26/14
to isc...@googlegroups.com
This occurs because iScroll tries to use hardware acceleration to make interactions more smooth. This adds a translateZ(0) property to the element, which moves the element to its own layer. When hardware acceleration is used, the browser takes a snapshot of the element at scale: 1 and then enlarges it like a bitmap, causing pixelation. This is what makes it fast.

If you add the option HWCompositing:false to the iScroll object, it will remain on the main layer and when you zoom the SVG it will re-render. This can cause a performance hit, and only works in newer browsers. For example, it will work on iOS7, but not before.

Adrian von Gegerfelt

unread,
Mar 2, 2014, 5:32:43 PM3/2/14
to isc...@googlegroups.com
Thank you for the tip regarding "HWCompositing:false". I'd be sure to try it, even if I can't rely on iOS7 just yet.


--
You received this message because you are subscribed to a topic in the Google Groups "iScroll" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/iscroll/cGYwMbBYnlM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to iscroll+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages