[FF] Image2: hovering the image causes it to change.

[Marek Lewandowski]

since: 4.3

Tested with FF24: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0

Hovering the image causes it to change. It looks kinda like it resizes just a little bit, or like it would became sharper.

1. open any sample with CKEditor (i.e. plugins/image2/samples/image2.html)
2. hover image with mouse cursor

[Piotrek Koszuliński]

I've seen this too... Unfortunately, seems to be a FF bug. But still Olek could give it a look.

[Olek Nowodziński]

Without the following in contents.css I'm unable to reproduce the issue:

:not(.ie8) img:hover
{
	opacity: .9;
	filter: alpha(opacity = 90);
}

Yet the funny thing is that it's reproducible for every image with specified dimensions in framed editor. For example:

1. Use replacebycode.
2. Set the following HTML:

   <p><img src="http://i.imgur.com/RyPWe66.jpg" style="height:173px; width:124px" /></p>
   <p><img src="http://i.imgur.com/RyPWe66.jpg" style="height:134px; width:168px" /></p>
   

3. The first image is OK. The second one is flickering.

Tested with the minimal setup:

CKEDITOR.replace( 'editor1', {
	plugins: 'wysiwygarea',
	allowedContent: true
} );

Also see attached screencast​​ to find that the issue is random.

[Piotrek Koszuliński]

Why hasn't been this issue reported on Gecko's bug tracker? This is rather important one, because it's very visible. We should also try to find a workaround if Mozilla won't fix it quickly.

[Piotrek Koszuliński]

This issue is already reported: ​https://bugzilla.mozilla.org/show_bug.cgi?id=714137

Also, we can avoid this image jumping by choosing different width of images (files or in HTML).

[Piotrek Koszuliński]

Since this bug is appearing randomly, other solution could be to stop using opacity:0.9 for hovered images inside widgets. Widgets have their own hover styles, so we don't need this for image2.

[Piotrek Koszuliński]

Fixed directly on major with ​git:4986e13.