Firefox 3 - blurred images...

[webberphotography]

Has anyone else noticed that small images appear blurred after installing Firefox 3 (at least including images up to 570 pix on the long axis)? I've searched around a bit and there are a few articles online relating to image zooming, and others that mention the new Cairo rendering engine that FF3 is now using....

Does anyone have a solution (other than rolling back to FF2) or know of any news that indicates the problem is being addressed? Take this as a warning - it really reduces viewing quality on many PBase pages!

[dang]

I updated to version 3 last week, and haven't noticed this problem. Could you add links to a couple of shots that appear blurred?

Also, out of curiosity, did you enable color profiling? I've heard reports of photos in sRGB having terrible banding problems when
it is, so decided not to turn it on. Personally, I'm not impressed and preferred version 2.

[webberphotography]

Interesting, thanks Dang - I wasn't aware you could enable colour profiling in FF3, and cannot find the menu option (or FF help instructions) to do it.

The thumbnails on the following page appear significantly blurred, as do the images when viewed at full size (particularly noticeable via the watermark):

http://www.pbase.com/webberphotography/suriname

Checking now, it seems to apply to the majority of my pages (which look fine in IE7 on the same screen), and also some (but not all) of a random selection of galleries from the "recently updated" page.

[dang]

Hi Bruce,
I'm sending a Pmail your way.

[webberphotography]

OK, I'm slowly getting to the bottom of it (with Dang's help, for which I am thankful)!

In FF2, all my images were displayed at 570x380px with an additional 2px black ridge border around them (i.e. making the whole area including the black border 574x384px).

Now in FF3 (without changing any CSS), I am getting my original image shown at 568x378px, this time with a 1px black border (i.e. now the border seems to be a subset of the originally intended total of 570x380px)....

However (!), removing the border all together in the CSS magically removes the blurring issue I was seeing with my images! Now I'm not sure if this is a specific fault of FF3, or a fault of the way PBase deals with image borders - any ideas anyone?

I presume the blurriness I was referring to earlier is as a result of image compression, but is that a problem with FF3 or PBase or an awkward interaction between the two?

For now I'm just going to remove the borders on the image pages, but this is not an ideal situation. Furthermore, the blurring problem still remains on the thumbnail pages where I am not prepared to remove the borders...

[chevellecazcaz]

Same problem on my end, I ended up changing my CSS to fix it.

[flemmingbo]

Interesting stuff. What must happen is some css code is now interpreted differently by Firefox 3 compared to FF 2 etc. This is a common problem anyway, CSS is shown differently by firefox, safari and IE (oh the horror!). Bit sorry to hear that Firefox 3 can now be thrown in the mix so we'll have to check our code in FF 3, FF 2, IE 6, IE 7 and safari at the very least to cover the most used browsers.

It's nothing to do with Pbase, css is all done in the browser, so it's Firefox 3. Can you post the css code you used to have that created the borders? Would like to look into this further, so I know where the problem lies.

best regards,

Flemming

[dang]

Bruce, thanks...
After looking, I've removed the boarder on my pics also even though with my lousy processing who cares.
I really feel since it's specific to FF3, there's nothing Pbase could do since it's the way the browser seems to work. As
far as the thumbs, it still seems to be FF3, since IE & Safari aren't distorting in the same way. Thanks for
bringing this up since I hadn't paid attention. After browsing more, it's certainly noticeable. I'm not too found of the way FF3 scrolls a page either. As someone wrote in the FF forums... "Not Ready For Prime Time". Wish I'd looked before updating!

For Flemming: Seems any code which adds borders to the main image rescales it.

Code: Select all

.display
{
border: 1px solid #ffffff;
background-color: black;
}

[flemmingbo]

Thanks! Found it...remove this bit from your css:

Code: Select all

* { -moz-box-sizing: border-box; }

It's a box model tweak and shouldn't be used in Firefox 3. This is what causes Firefox 3 to rescale the images. Remove this and it displays fine, everything is displayed correctly, border etc is added to the width of the images, images are not scaled.

regards,

Flemming

[dang]

Flemming...
I'd forgotten about adding that section of code, and Bruce has it in his too. Works like a charm to remove it. Excellent, thanks!

[webberphotography]

Great Flemming, many thanks!

I removed the above section from my CSS and it has fixed everything - no resizing with the borders on FF3 (and of course still fine on FF2 and IE7). The thumbnail galleries are back to being OK too.

The only problem is I now have FF3 reinstalled again (!) and will have to roll back once more to FF2.... it doesn't seem to be quite ready for a number of other reasons. Sigh!

[flemmingbo]

Glad to hear it helped.

Why do you have to rollback again ? I have to say that so far I love Firefox 3, have been using the betas for some time and I reckon it's absolutely excellent.

regards,

Flemming

[webberphotography]

Hmmm, maybe a hasty decision and I haven't quite rolled back yet. The things that are annoying me at the moment are (i) the odd scrolling, (ii) the lack of a down arrow on the back text (not icon) tab to go back multiple pages at once, and (iii) the constant time-outs. I'm sure these could be tweaked, so I might just hold off on that roll back for now!

[madlights]

Just on a sort of side note. I installed FF3 and enabled the color space awareness. On one of my dark background pics, very severe banding was very pronounced. I reinstalled FF3 without the color space awareness enabled and it was less pronounced, but still apparent. (I checked and the pic was srgb)...I went into Photoshop and darkened the background a bit more and the banding lines went away in FF3. Now during this time I sporadically switched installs between FF v2 and at no time could see any banding in FF2...only in FF3. Nor in Photoshop when downloaded. Strange. Right now I'm back to V2 only because a couple of my add ons seemed incompatible (Opanda and one of my themes)...I don't know if this banding was caused by an incompatibility with a video driver, with PBase compression, or with FFV3 itself ...but just thought in case, I'd post this so others could keep their eyes open. I don't like the fact that many browsers are going to color space awareness. Although I do understand that certain color spaces give much more latitude and better color, but srgb has been a web standard for a long time. I would still say the majority of my hits are by people running older browsers. We as photographers are very aware of color etc. so we've probably got the latest and greatest in that regard, but seems many others don't. I'm not going to post pics in ARGB, or Prophoto because it's going to be a long, long time before color space awareness in the 'real world' is universal and an ARGB color space doesn't look the best on an srgb browser....besides Photoshop does a wonderful job of conversion from one color space to another for the net, in my opinion.

[jkseidel]

Firefox 3 has known issues with its color management code. That is why the Mozilla devs opted to not enable it by default (also why there isn't a menu item to toggle it either, one must manually toggle it in the config file). The discussion about it is here. One of the larger bugs with FF3 color management is cited here. Also, IE 8 is due out at the end of the year or early 2009, I believe it will also have color management capabilities and be able to honor/render embedded ICC profiles. If such is the case with IE8, then Madlights' doom-and-gloom estimation of the time frame involved should hopefully be proven inaccurate. I hardly expect Adobe RGB or ProPhoto to become web standards as a result of browsers finally catching up with Safari's rendering abilities. What I do expect is that at least I can post an image with an embedded profile and expect to have it honored and rendered properly. I feel that sRGB will be a defacto standard for some time to come as it is the lowest common denominator and the output space of the majority of consumer imaging devices.