1210100 - image in SVG pixelated in newer firefox verions

Status: RESOLVED DUPLICATE of bug 608812

(Core :: SVG, defect)

Description

[mailtopuran]

Attachment: Screen Shot 2015-09-30 at 12.37.53 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150917150946

Steps to reproduce:

1. Open this SVG in firefox
<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image xlink:href="https://mdn.mozillademos.org/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />    
</svg>

2. Resize the browser to make it smaller (minimum)


Actual results:

When we resize browser window to minimum or after certain size, the logo image starts to look pixelated.


Expected results:

Ideally it shouldn't be pixelated. I tried same thing on Chrome and Safari and image quality remains the same

Comment 1

[Robert Longson [:longsonr]]

Attachment: reporter's testcase

Comment 2

[Robert Longson [:longsonr]]

If this has changed, could you use moz-regression (http://mozilla.github.io/mozregression/) to find out when?

Comment 3

[mailtopuran]

On a high level we see it not working after version 30.

Comment 4

[Ryan VanderMeulen (PTO, back July 27)]

On Windows 10, Edge and Firefox have similar behavior with respect to looking more pixelated at smaller sizes. Chrome does look smoother to me as well.

One change I noticed while bisecting this is that the pixelation reproduces during resizing pretty much forever, but there's a smoothing step that occurred in older versions, almost like a reflow or something, which no longer occurs after letting go of the corner.

Regression range: http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=690b5e0f6562&tochange=a6104e0e5a2c

Unfortunately, due to the age of this regression, I can't bisect within the inbound regression range to narrow it down to a specific commit. Offhand, bug 864832 looks pretty relevant, though.
http://hg.mozilla.org/mozilla-central/rev/96c350f2c64a

I also don't have a Mac to confirm that the regression range is the same there, but I got the same regression range on both Linux and Windows, so I'm pretty sure it's accurate.

Comment 5

[Jonathan Watt [:jwatt]]

I seem to remember that I could reproduce this at the time, but couldn't easily figure out what had changed. Now I don't seem to be able to reproduce this. Can anyone else still reproduce?

Comment 6

[Ryan VanderMeulen (PTO, back July 27)]

I can still see the issue on Windows 10. More specifically, what I still see is:

(In reply to Ryan VanderMeulen [:RyanVM] from comment #4)
> One change I noticed while bisecting this is that the pixelation reproduces
> during resizing pretty much forever, but there's a smoothing step that
> occurred in older versions, almost like a reflow or something, which no
> longer occurs after letting go of the corner.

That smoothing still doesn't happen for me (and it looks more pixelated around the edges as a result).

Comment 7

[Jonathan Watt [:jwatt]]

I have a Windows 10 machine arriving in a couple of weeks. I'll try resurrecting the old InvalidateBounds code from https://hg.mozilla.org/mozilla-central/rev/c8ab8321f674#l1.12 and get the code at http://hg.mozilla.org/mozilla-central/rev/96c350f2c64a#l5.1 to use it and see if that helps.

Comment 8

[Paul LeBeau]

This is still happening in 56.

Alternate testcase: https://jsfiddle.net/ktqa89kx/3/

<svg class="play" width="24" height="24" viewbox="0 0 24 24">
  <circle cx="12" cy="12" r="12" fill="black"   />
  <image x="6" y="2" width="16" height="20" xlink:href="https://i.imgur.com/9JZdJz0.png"/>
</svg>

Comment 9

[Paul LeBeau]

Attachment: 9JZdJz0.png from my testcase. Attached in case it goes missing from imgur