@nadir_bertolasi wrote:
I'm developing am application using ionic framework.
I have a view that shows a map, which is an SVG file:
<ion-scroll zooming = "true" overflow-scroll="false" has-bouncing="false" min-zoom='1' max-zoom='4' delegate-handle="zoom-pane" class="zoom-pane" direction = "xy" style = "width: 100%; height: 100%"> <img ng-src="{{mapImgUrl}}"> </ion-scroll>
This is the corresponding CSS.zoom-pane .scroll { min-height: 100%; /* Vertical align */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-alig\n: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .zoom-pane img { width: 100%; vertical-align: middle; }
I need
.zoom-pane img
in order to adapt the image to parent div and fit it. In this case my svg image is correctly shown but I have different behaviors in Android 4.2.2 to 5.0.0 with respect to android 5.1+.On recent versions the svg file is rendered with the best quality and zoom directive works really well. With Android 5.0.0- I got an image with a very poor resolution, when I zoom it get worse.
I think the problem is due to browser image resizing that reduces quality to fit 100% screen width, then if I zoom I get it blurred.
Can somebody help me understand how to force it maintain its quality?
Posts: 1
Participants: 1