The default bug view has changed. See this FAQ.

Problem with fading CSS clip-path applied div. Drawing not updated

VERIFIED FIXED in mozilla23

Status

()

Core
CSS Parsing and Computation
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: ISHITOYA, Kentaro, Unassigned)

Tracking

({regression})

20 Branch
mozilla23
x86
All
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:20.0) Gecko/20100101 Firefox/20.0
Build ID: 20130326150557

Steps to reproduce:

Applying CSS clip-path to some div to mask image. And trying to fadeIn/Out with jQuery.
See Ex1 at http://kent013.github.io/masking-test/

HTML:
----
    <h2>Ex1</h2>
    <p>Using clip-path for FireFox (Animation fails on OSX Firefox and IE9)</p>
    <div id="example1" class="example">
      <div class="mask"></div>
      <p><a class="animate" href="javascript:void(0);">Click to Fade In/Out</a>\
 <a class="toggle-obstable" href="javascript:void(0);">Toggle Obstacle</a></p>
    </div>
----

CSS:
----
#example1 div.mask{
    clip-path: url('../images/mask.svg#mask');
}
----

js:
----
layer = $('#example1 div.mask');
layer.css('background-image', 'url(images/image.png)');

$('a.animate').on('click', function(e){
    var layer = $(e.target).parents('div').find('div.mask');
    layer.fadeOut(
        {duration:1000, complete:function(){
	    layer.fadeIn(
                {duration:1000}
            );
        }}
    );
});
----




Actual results:

Masked layer is not redrawn during animation.
See Ex1 at http://kent013.github.io/masking-test/


Expected results:

It should redrawn until animation.
See Ex2 at http://kent013.github.io/masking-test/
(Ex2 is an example of masking image with SVG Foreign Object)
Status: UNCONFIRMED → NEW
Component: Untriaged → DOM: CSS Object Model
Ever confirmed: true
Product: Firefox → Core
It seems to be a regression between FF 17-18.
Component: DOM: CSS Object Model → Style System (CSS)
Keywords: regressionwindow-wanted
OS: Mac OS X → All

Comment 2

4 years ago
Regression window(m-c)
Good:
http://hg.mozilla.org/mozilla-central/rev/b274e8e3479f
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928160219
Bad:
http://hg.mozilla.org/mozilla-central/rev/b62b229a4d41
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928161018
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b274e8e3479f&tochange=b62b229a4d41

Regression window(m-i)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/9f476b4ac1e1
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928040137
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/6b58397ad735
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/18.0 Firefox/18.0 ID:20120928042236
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=9f476b4ac1e1&tochange=6b58397ad735
Fallout from bug 539356?
Blocks: 539356
Keywords: regressionwindow-wanted → regression
Created attachment 737345 [details] [diff] [review]
Invalidate when opacity change on a frame with svg-effects

I think it would probably be worthwhile to always create nsDisplayOpacity items, even if we have nsSVGEffects. That would let us take advantage of layerization and skip repainting for this testcase.

Probably not something we want to uplift though.
Attachment #737345 - Flags: review?(roc)
Attachment #737345 - Flags: review?(roc) → review+
https://hg.mozilla.org/integration/mozilla-inbound/rev/457ff5b67290
https://hg.mozilla.org/mozilla-central/rev/457ff5b67290
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla23
Verified fixed nightly 23.0a1 (2013-04-17) Win 7, Ubuntu 12.04, Mac OS X 10.8.3
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.