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?