714137 - image opacity changes result in odd alpha / invalidation for scaled image

Status: NEW

(Core :: Graphics, defect)

Description

[Micah Bucy]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:10.0) Gecko/20100101 Firefox/10.0
Build ID: 20111221135037

Steps to reproduce:

mouseover and mouseout an png as img src scaled down to fit inside an anchor element. anchor element has different opacity in normal and :hover state.  :hover state is opacity: 1.  Normal state is opacity: 0.8.


Actual results:

:hover state works fine.  on mouseout back to normal state, the png becomes aliased before anti-aliasing again.  Doesn't seem to affect all pngs.  I think it is more as if partial transparency is disabled during the change.  Also note that images that are not scaled to fit inside the anchor element do not exhibit this issue.  

Weird thing is in safe mode it works fine, but in normal mode with all add-ons disabled and cache cleared, this is still exhibited, so I'm not exactly sure what the cause could be unless the default for css property image-rendering is somehow messed up outside of safe mode.


Expected results:

png should not have aliased.

Comment 1

[Micah Bucy]

even with image-rendering: optimizeQuality specified in the css, this issue is still exhibited, so that rules out the default being messed up.

Comment 2

[Justin Dolske [:Dolske]]

Can you provide an example URL where this happens?

Comment 3

[Micah Bucy]

Yes.  http://eternalsword.com/firefoxbug/index.html  The more the image has been scaled down, the more evident the issue is.  Original size is 216px.  Image scaled to 50px by the size of the anchor.

Comment 4

[Justin Dolske [:Dolske]]

Ah, weird. I see exactly what you describe in comment 0. Additionally, upon mouseout I see the image change back to grey with a pixelated edge, and then a fraction of a second later it returns to a smooth edge.

Seems like something is either invalidating in an odd way, or we're asynchronously redecoding/scaling the image when the hover state changes?

Since you say this doesn't happen in safe mode, it's most likely a result of using hardware acceleration (which we disable in safe mode). Over to Gfx!

Comment 5

[Ian Yates]

Just wanted to add my example to the pile: check out <a href="http://webdesigntutsplus.s3.amazonaws.com/tuts/238_plus_demo/demo/index.html">this hover effect</a>, particularly on the thumbnails to the right. For details on exactly what's being done here, <a href="http://webdesign.tutsplus.com/tutorials/site-elements/quick-tip-perfectly-positioned-plusses/">refer to the accompanying tutorial</a>. Thanks!

Comment 6

[Jordan Bates]

Possibly related?

https://bugzilla.mozilla.org/show_bug.cgi?id=728839

Comment 7

[zorotipping]

This seems the same bug as reported here - 
http://forums.mozillazine.org/viewtopic.php?f=9&t=2439275

and may respond to the same temporary fix. i.e. give the image this style -

box-shadow: #000 0 0 0;

it worked for me.

Comment 8

[zorotipping]

Just tested the box- shadow fix on Micah Bucy's test case and it worked.  Therefore it would seem that images given a box shadow retain their anti-aliasing and those whose opacity is changed to 1 do not.  This is a bug which seems to have appeared in FF10 and still remains.  It may only affect resized images, but whoever changed the code in FF9 would you please change it back!

Comment 9

[Jordan Bates]

This issue I found is related to this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=728838

The issue there is that very large images with a changed z-index will disappear and reappear randomly as you scroll.

On a whim I decided to apply "box-shadow: #000 0 0 0;" to see if it changed it there, and rather than fixing it, the whole image disappeared completely.

So the bugs are related, and I hope this finding leads to a fix to both bugs.

Comment 10

[finex]

Hi, I'm experiencing a similar bug with Firefox 22.0 on ArchLinux/KDE4, I didn't tried other platform and desktop enviroments.

This is the relevant HTML code:
<a href="http://www.example.com">
  <img width="280" height="210"  src="http://www.example.com/image.jpg">
</a>

And this is the CSS code:

img{
  max-width:100%;
}
a{
  background: none repeat scroll 0 0 black;
  display: block;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  width:271px;
}
a:hover img{
  opacity:0.5;
}
The image is exactly 280x210 pixels.

When the mouse hover the image, the "opacity" effect is applied but the image is slightly resized.

I've tried to change the "<a>" width: the bug doesn't occur on every width, but only on some. Probably the opacity effect use a different round algorithm.

Thanks for the attention.



P.S: the box-shadow workaround works fine on my case.

Comment 11

[finex]

P.S: I've recorded a short video to demonstrate the problem on Macosx and latest Firefox 23 http://www.youtube.com/watch?v=HSKVeI2gA5E

Comment 12

[Piotrek Koszuliński]

I also recorded a video - http://www.youtube.com/watch?v=UwsvncSiXiI

The problem is even more visible, because the image "jump" when hovered by mouse.

Reported on CKEditor's bug track: http://dev.ckeditor.com/ticket/10893, because the issue is very annoying on CKEditor's samples: http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/image2/image2.html