New issue
Advanced search Search tips
Starred by 8 users

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2013
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug



Sign in to add a comment
link

Issue 161982: SVG images rendered as Bitmap

Reported by hardw...@gmail.com, Nov 20 2012

Issue description

Steps to reproduce the problem:
1. Go to the jsfiddle page(http://jsfiddle.net/rc8Hh/1/)
2. Zoom into the SVG-files displayed in the lower right of the page

What is the expected behavior?
All three SVG files should be displayed sharp and clear in every zoom state

What went wrong?
All SVGs included as an image are blurry, looks like they are rendered as a bitmap and not repainted on zoom.
Only the inline SVG is sharp as expected

Example URL:
http://jsfiddle.net/rc8Hh/1/

Does it occur on multiple sites: Yes

Is it a problem playing media? No

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes Android Stock browser

Chrome version: 18.0.1025464  Channel: stable
OS Version: 4.1.1
 
svgchrome.jpg
141 KB View Download

Comment 1 by patrick....@guardian.co.uk, Nov 27 2012

I have noticed this to, and only when the svg is being declared as a background-image css property, inline svg are fine. We are using base64 data uri's for all icons on http://m.guardian.co.uk/ 

Our svg's report themselves at the correct  pixels size for the box model space. But we only see this issue on high dpi devices. Therefore, it is as if the  engine is painting the svg at it's reported size then scaling the bitmaped version @2x for the screen, which in turn is causing anti-aliasing and blurring. 

The stock jellybean 4.2 browser handles these perfectly.

Comment 2 by paulir...@chromium.org, Nov 28 2012

Cc: pdr@chromium.org

Comment 3 by pdr@chromium.org, Nov 28 2012

Status: FixUnreleased
hardwehr, thank you for taking the time to file this bug.

The good news is: I fixed this a few months ago.

Unfortunately, the Chrome 18 version that is shipping on many Android devices is behind the desktop browser by a few versions, which is why this bug is still biting you. The Chrome team is working hard to update the Android browser and "early next year" is roughly the timeframe that's been announced publicly (https://plus.sandbox.google.com/+chrome/posts/e9HVLDwfjLr).

I'm marking this as FixUnreleased, but please do comment if I can help further.

Comment 4 by jsc...@chromium.org, Dec 20 2012

Status: Fixed

Comment 5 by voodoo...@gmail.com, Mar 3 2013

Just downloaded the latest chrome beta (v25.0.1364.122) and this issue still exists?

Comment 6 by pdr@chromium.org, Mar 5 2013

Cc: -pdr@chromium.org
Owner: pdr@chromium.org
Status: Started
There have been over 10 separate bugs in this area fixed in the past 4 months. I suspect the one I was referring to in #3 was only a partial fix (shame on me for not including the link...)

I can confirm the svg-as-image cases look blurry in Chrome 25, but they are fixed in Chrome 26. The Android browser just got on the regular Chrome release cycle so this fix should appear in the next beta update.

Here is a summary of the recent patches in this area (all of these are in Chrome 26):
http://trac.webkit.org/changeset/140722 - Preserve container size requests across image loads
http://trac.webkit.org/changeset/142765 - Replace SVG bitmap cache with directly-rendered SVG
http://trac.webkit.org/changeset/143257 - Fix scaling of tiled SVG backgrounds on high-dpi displays
http://trac.webkit.org/changeset/141637 - Change hasAlpha to isKnownToBeOpaque and correct the return value for SVG images.
http://trac.webkit.org/changeset/141303 - Track scale and zoom together when drawing SVG images
http://trac.webkit.org/changeset/139484 - Skip CachedImage::CreateImage if we don't have image data
http://trac.webkit.org/changeset/138976 - Clear pending container size requests as early as possible
http://trac.webkit.org/changeset/138958 - Refactor client removal in CachedResource::switchClientsToRevalidatedResource
http://trac.webkit.org/changeset/137981 - Queue container size requests while images are loading.
http://trac.webkit.org/changeset/143541 - Transformed SVG background images can be blurry/pixelated

I'm moving this status to "Started" until we can confirm this is fixed in Chrome 26beta on Android.

Comment 7 by bugdroid1@chromium.org, Mar 10 2013

Project Member
Labels: -Area-Webkit Cr-Content

Comment 8 by pdr@chromium.org, Mar 30 2013

Status: Fixed
This looks good on Chrome 26.0.1410.49b on Android. Finally marking as fixed.
chrome26b.png
95.6 KB View Download

Comment 9 by bugdroid1@chromium.org, Apr 5 2013

Project Member
Labels: -Cr-Content Cr-Blink

Comment 10 by ja...@hutber.com, Feb 15 2017

I'm currently having this issue with Chrome 55 on my Nexus 5 and all other android devices. 

My css is as follows:

.social .email a {
    width: 30px;
    height: 30px;
    background-position: -140px -263px;
}
social.scss:5
.social a, .social label {
    display: block;
    min-width: 30px;
    height: 30px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    background-size: 348px 296px;
    background-image: url(../assets/webSprite.svg);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-position: -110px -263px;
}
Screenshot_20170215-161914.png
926 KB View Download

Comment 11 by pdr@chromium.org, Feb 15 2017

Jamie, can you create a small example (jsbin.com, or jsfiddle.net, etc) showing the bug?

Sign in to add a comment