939095 - Images do not cross fade with element() when different values of opacity are being animated for different images.

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Alan Gresley]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131025151332

Steps to reproduce:

Created a demo with a cross fade effect using element() by varying the amount of opacity by animation. First spotted when creating this demo.

http://css-class.com/test/css/3/image/element-cross-fade2.htm

I have created a simple demo here for debugging.

http://css-class.com/test/bugs/gecko/element-cross-fade.htm

I have also created a demo with nest images.

http://css-class.com/test/bugs/gecko/img-cross-fade.htm


Actual results:

The image with the blue (the top portion) remains blue until the yellow reaches fully opacity, when this happens, the composite colour turn a olive and the composite colour of the both images remains olive until the yellow reaches fully opacity. When this happens, the yellow images remain yellow until the blue image has full opacity again. When this happens, the blue image appears again.


Expected results:

A difference in the composite colour for both images since the opacity is being altered at different times for each image by animation.

It should begin by being blue briefly, then fade to a purple, then grey, then olive (in quick succession but evenly) and then yellow. It should then remain yellow briefly, then fade to a olive, then grey, then purple (in quick succession but evenly) and return to blue.

If you resize the viewport continuously, the bug disappears.

If you un-comment the commented out CSS with a background-size hack (from 100% to 100.1%), the bug disappears. Like so.

/* ******* A hack to get the effect to work in Gecko ******* */

      #test { -moz-animation: hack-it-in 20s infinite linear; }

      @-moz-keyframes hack-it-in { 0% { background-size: 100% } 100% { background-size: 100.1% } }

A similar type bug is observed with nest images. Please see img-cross-fade.htm

Comment 1

[[:Aleksej]]

Behaves as described with 2013-11-18-03-02-03-mozilla-central-firefox-28.0a1.ru.linux-x86_64.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

Attachment: Reporter's Testcase