957660 - All images on Mac OS X 10.9.1, Firefox Nightly, have "low-resolution" (using 4 pixels for each "pixel"). The images display fine in Chrome/Safari.

Status: RESOLVED WORKSFORME

(Core :: Widget: Cocoa, defect)

Description

[Arthur Migdal]

Attachment: Left image is resized, large image. Right image is a non-resized image which looks better in Safari/Chrome.

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140107030202

Steps to reproduce:

Mac OS X 10.9, retina screen.

I opened up *any* website with images that are NOT resized from a larger size.


Actual results:

They appear with 4 pixel for every 1 "pixel".


Expected results:

The image should have had a 1:1 "image pixel" to pixel of image. This works in other browsers such as Chrome and Safari.

Comment 1

[:Gijs (he/him)]

Is this a recent regression? That is, did this work for you in yesterday's, last week's or last month's nightly?

Comment 2

[:Gijs (he/him)]

Actually, looks like this is basically about resampling/resizing images automatically so they look better on retina. Markus, any idea what would need to happen for this? I actually kind of assumed we'd have it filed, but I couldn't find anything...

Comment 3

[Steven Michaud [:smichaud] (Retired)]

Testing in OS X 10.7 on a Retina MacBook Pro, with FF 26 and Safari, I frankly can't tell the difference between how this bug's testcase image is displayed, even zoomed to the maximum size.  Later I'll test on 10.8 and 10.9.

Comment 4

[Steven Michaud [:smichaud] (Retired)]

I also can't tell the difference testing with today's mozilla-central nightly and Safari on OS X 10.7, 10.8 and 10.9.

Gijs, can you really reproduce this bug yourself?

Comment 5

[Steven Michaud [:smichaud] (Retired)]

And Arthur, can you reproduce this bug in Firefox (today's m-c nightly or other versions) with a clean profile?

Comment 6

[Steven Michaud [:smichaud] (Retired)]

The one thing I *do* see, and only on 10.9 (actually 10.9.1), is that Safari seems to be doing more antialiasing that Firefox with both images.

Comment 7

[Steven Michaud [:smichaud] (Retired)]

(Following up comment #6)

Actually I see the antialiasing (in Safari) on both OS X 10.9.1 and 10.8.5, but not on OS X 10.7.5.

Comment 8

[Arthur Migdal]

This has been happening for a while with nightly.
The most startling difference that I can see is with Google Docs when editing a text document (left FF, right Safari): https://i.imgur.com/bVWBuOX.png

Same goes for Nightly with a clean profile (left FF clean profile, right Safari): https://i.imgur.com/iTZDHNI.png

Comment 9

[Arthur Migdal]

Attachment: Left FF (default profile), Right Safari.

Comment 10

[Arthur Migdal]

Attachment: Left FF (clean profile), Right Safari

Here. So there's no imgur.

Comment 11

[Steven Michaud [:smichaud] (Retired)]

> This has been happening for a while with nightly.

Do you also see this with FF 26?

Are you able to test on OS X 10.8 or 10.7?

Comment 12

[Steven Michaud [:smichaud] (Retired)]

Arthur, I *can* reproduce what you report about Google Docs, even on OS X 10.7.5, using either today's mozilla-central nightly or FF 26.

More specifically, all the menu item icons appear to be in HiDPI mode in Safari, but not in FF 26 or today's mozilla-central nightly.

Comment 13

[Arthur Migdal]

Attachment: Left FF 26, Right Safari

And this is Firefox 26.

Comment 14

[Steven Michaud [:smichaud] (Retired)]

(Following up comment #12)

It's quite likely Google Docs behaves differently in Firefox and Safari.  Later I'll try fiddling with FF's user-agent string, to see if this makes a difference.

Comment 15

[:Gijs (he/him)]

Basically, opening http://mozorg.cdn.mozilla.net/media/img/home/panel/webmaker/logo-webmaker.png (the webmaker background on the mozilla homepage) in Fx 27 or 29 on a retina screen, you see 1 image pixel for each CSS pixel, which translates to 4 screen pixels (a 2x2 block for each image pixel).

Safari and Chrome seem to upscale the image with a decent resize algorithm, and then display that scaled down, so that the original 1 image pixel has been upscaled to 4 different pixels which leads to nicer-looking results on a retina screen. The difference is easy to see if you zoom in with ctrl+two-finger-touchpad-scroll on my retina 10.9 machine; I'm not very discerning when it comes to my normal browsing experience, so I don't notice it too much in normal browsing, although the Google docs example is quite visible even to me.

Comment 16

[:Gijs (he/him)]

(In reply to Steven Michaud from comment #14)
> (Following up comment #12)
> 
> It's quite likely Google Docs behaves differently in Firefox and Safari. 
> Later I'll try fiddling with FF's user-agent string, to see if this makes a
> difference.

I just did that, AFAICT we're both getting https://ssl.gstatic.com/docs/common/jfk_sprite105.png" and that gets absolutely positioned... although somehow Safari and Firefox's devtools show different 'top' coordinates for that, but plugging Safari's into Firefox shows transparency... not sure what's going on there.

Comment 17

[:Gijs (he/him)]

(In reply to :Gijs Kruitbosch from comment #16)
> (In reply to Steven Michaud from comment #14)
> > (Following up comment #12)
> > 
> > It's quite likely Google Docs behaves differently in Firefox and Safari. 
> > Later I'll try fiddling with FF's user-agent string, to see if this makes a
> > difference.
> 
> I just did that, AFAICT we're both getting
> https://ssl.gstatic.com/docs/common/jfk_sprite105.png" and that gets
> absolutely positioned... although somehow Safari and Firefox's devtools show
> different 'top' coordinates for that, but plugging Safari's into Firefox
> shows transparency... not sure what's going on there.

Oh, well, that wasn't as hard as I thought... that image is used everywhere, but if you match this media query:

@media screen and (-webkit-device-pixel-ratio:2){


you get a different image and a different offset into it. Surprise! So that's a tech evangelism issue - Google should fix their CSS to make mac users on Firefox have nice images.

The issue I described in comment #15 still stands, however.

Comment 18

[Markus Stange [:mstange]]

(In reply to Arthur Migdal from comment #0)
> Created attachment 8357195 [details]
> Left image is resized, large image. Right image is a non-resized image which
> looks better in Safari/Chrome.

Arthur, can you please give us the exact URL at which you made that screenshot? I fear this bug is mixing many different issues.

Comment 19

[Steven Michaud [:smichaud] (Retired)]

(In reply to comment #15)

I see this on OS X 10.8.5 and 10.9.1 (though not on 10.7.5).  It's identical to the "antialiasing" I described earlier.

Even zoomed way up (using ctrl+two-finger-touchpad-scroll), the image doesn't look any "sharper" in Safari to me.  It seems pixellated to the same degree as in Firefox, but the pixellation is "smoother" (as if it were antialiased).  In fact I'd say that the image actually looks blurrier in Safari, because of the effect of this "antialiasing".

By the way, support for the ctle+two-finger-touchpad-scroll gesture isn't on by default.  In the Accessibility system pref panel you need to select "use scroll gesture with modifier keys to zoom".

Comment 20

[Arthur Migdal]

(in reply to Comment #18)

This was when I created a new document in Google Drive. The exact URL cannot be given because it changes every time you make a new document.

I have noticed the same effect at http://arstechnica.com as well in the top logo.

Comment 21

[Arthur Migdal]

(in reply to Comment #18)

Oh, the original image is taken from http://mozilla.org
Sorry for the confusion.

Comment 22

[Markus Stange [:mstange]]

(In reply to Arthur Migdal from comment #21)
> (in reply to Comment #18)
> 
> Oh, the original image is taken from http://mozilla.org
> Sorry for the confusion.

Ah, ok. Now I see it too, thanks. So Gijs was right in comment 2, this is all about the way we upscale the image.

Jeff, do you know why our scaling looks different and if that's intentional?

Comment 23

[Jeff Muizelaar [:jrmuizel]]

(In reply to Markus Stange [:mstange] from comment #22)
> (In reply to Arthur Migdal from comment #21)
> > (in reply to Comment #18)
> > 
> > Oh, the original image is taken from http://mozilla.org
> > Sorry for the confusion.
> 
> Ah, ok. Now I see it too, thanks. So Gijs was right in comment 2, this is
> all about the way we upscale the image.
> 
> Jeff, do you know why our scaling looks different and if that's intentional?

It's not clear from this bug which images you're referring to. Perhaps it's worth opening a new bug with the specific issue (not the google docs evangelism).

Comment 24

[Markus Stange [:mstange]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #23)
> It's not clear from this bug which images you're referring to. Perhaps it's
> worth opening a new bug with the specific issue (not the google docs
> evangelism).

I've filed bug 965254 about the issue.

Comment 25

[Josh Aas]

A lot has changed since this was filed and I haven't seen any issues like this in a long time. I don't think there is any more we can realistically do with this report. If there's a continuing issue I think it would be best to file a new more specific report.