SVG quality in android browsers- Ionic Scroll

@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

Read full topic