New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 13 users

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat

Blocking:
issue 530714



Sign in to add a comment

SVG clipPath animation not updating while page is active

Reported by sara.sou...@gmail.com, Jul 6 2014

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36

Example URL:
http://codepen.io/SaraSoueidan/full/ed748493ee430cea36eeb4d321078f5e

Steps to reproduce the problem:
1. Create an animated <clipPath> (e.g using <circle ...> <animate ..> </circle>)
2. apply the clip path to an HTML image using the CSS `clip-path` property
3. Watch animation (it's frozen).
4. Switch tabs (so that page is inactive) then come back to demo page.

What is the expected behavior?
The animated clipPath should not be frozen. It should animate normally while the page is active.

What went wrong?
The clipPath animation is frozen at one point while the page is active. If you switch to another page and then come back, you see the clipPath updated as if it were animating normally in the background while the page was inactive.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 35.0.1916.153  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 14.0 r0

The attached GIF shows how the bug is doing on Chrome Canary (Same applied for Chrome 35 stable) on Windows.
 
clippath-animation-bug.gif
1.6 MB View Download

Comment 1 by a...@chromium.org, Jul 7 2014

Cc: f...@opera.com
Labels: Needs-Feedback
fs@opera.com:Could you please confirm if this is the same as  Issue 391291 
Hi,

Yes I can confirm. It's definitely not the same. I'm familiar with Issue
391291 (I asked Vincent to file that one after making sure we both had the
same problem back then). It's a different one. I only have one clipPath
applied on the page, and the clipPath works except that it just doesn't
update while the page is active. It seems to be a repaint problem when the
page is active. :)

Comment 3 by f...@opera.com, Jul 7 2014

Labels: -OS-Windows -Needs-Feedback OS-All
Status: Available
Different issue, yes. Looks like the RenderLayer isn't notified on changes to the clip-path.

Attaching smaller TC.
clip-path-animated.html
691 bytes View Download

Comment 4 by f...@opera.com, Jul 7 2014

The same problem is also visible when mutating the clipPath sans animation.
clip-path-mutated.html
717 bytes View Download
Able to reproduce on Chrome35.0.1916.153 stable and chrome38.0.2082.0 canary channels.


Labels: Needs-Bisect
Cc: pdr@chromium.org ojan@chromium.org rponnada@chromium.org sfirsov@chromium.org
Labels: -Needs-Bisect M-38 Cr-Blink-Rendering
Able to repro this issue on Windows7 using: 38.0.2084.0 canary. 

1. Opened attached html file in comment4# - Red colored rectangle with Green colored circle at the middle is displayed
2. Change the tab and come back - Complete Green colored rectangle is displayed. 

This is non-regression issue, same behavior is observed from M26

This is working fine in Firefox.

Comment 8 by tkent@chromium.org, Jul 8 2014

Labels: Cr-Blink-SVG
Looks like non-SVG clip-path clients never register with the SVG resource cache (don't call SVGResourcesCache::{clientWasAddedToTree,clientStyleChanged}) -> they don't get invalidated on clip-path changes.

As I am seeing SVGResourcesCache::{clientWasAddedToTree,clientStyleChanged are intended for SVG clients only.Even If we call them for non-SVG clip-path clients, it will assert.

Actual issue could be , it is not getting invalided for repaint.
Any one give any pointers for this issue, I could investigate this issue further.
Thanks

Comment 11 by f...@opera.com, Jul 25 2014

I think some relevant places to look at are RenderSVGResourceContainer::addClientRenderLayer and how it's used to achieve the same for the 'filter' property (on HTML, see RenderLayerFilterInfo I think).
Thank you for the hint. I am working on this issue.
I am planning to introduce a new file similar to RenderLayerFilterInfo.
name like RenderLayerClipPathInfo and implement the needed. (Adding the Renderlayer to RenderSVGResourceContainer)
Can I go ahead with this approach ? Or anyone having any suggestions ? It will really helpful.

I have tried that and seeing clip path animation is working after this.

Submitted a patch. Could you review it please.

https://codereview.chromium.org/423823004/

Comment 15 by ojan@chromium.org, Oct 16 2014

Cc: -ojan@chromium.org
Labels: -Cr-Blink-Rendering Cr-Blink-Layout
Migrate from Cr-Blink-Rendering to Cr-Blink-Layout

Comment 17 by f...@opera.com, Jan 22 2015

 Issue 450256  has been merged into this issue.
I would love to use this feature in SVG animations. There is a lot of graphic possibility here that's being held back for lack of support. Has there been any off-thread review of the patch in #14? Thanks for revisiting this.
Blocking: chromium:530714

Comment 20 by f...@opera.com, Apr 14 2016

 Issue 603487  has been merged into this issue.

Comment 21 by pdr@chromium.org, Jun 24 2016

 Issue 621600  has been merged into this issue.

Comment 22 by pdr@chromium.org, Jun 24 2016

Attaching the testcase from 621600.
clipbug.html
644 bytes View Download
would love to see this sorted out, is there any hope?
Labels: Hotlist-Fixit

Comment 25 by f...@opera.com, Nov 8 2016

Owner: f...@opera.com
Status: Assigned (was: Available)
Assuming my new proxy construct sticks, this ought to be fairly easy to fix.
Project Member

Comment 26 by bugdroid1@chromium.org, Nov 15 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f

commit ad7c7f0de20e3ad160f063f1990c69ce97f7e16f
Author: fs <fs@opera.com>
Date: Tue Nov 15 16:35:37 2016

Use an SVGElementProxy in ReferenceClipPathOperation

This transforms ReferenceClipPathOperation into using the SVGElementProxy
mechanism. Currently only for PaintLayer clients.

PaintLayerFilterInfo is generalized to PaintLayerResourceInfo and used as
the proxy/resource client for the 'clip-path' property. This enables change
notifications to flow back to the PaintLayer from the <clipPath> subtree.

The SVGElementProxySet is made a little bit generic by moving it to
SVGElementRareData, however it's still only made available for the few element
types that are used with it.

BUG= 391604 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2484153003
Cr-Commit-Position: refs/heads/master@{#432193}

[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/LayoutTests/css3/masking/clip-path-reference-mutated-expected.html
[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/LayoutTests/css3/masking/clip-path-reference-mutated.html
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/LayoutBoxModelObject.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceFilter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceFilter.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/BUILD.gn
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/ClipPathClipper.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/FilterPainter.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayer.h
[rename] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayerResourceInfo.cpp
[rename] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/paint/PaintLayerResourceInfo.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/BUILD.gn
[add] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/ClipPathOperation.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/style/ClipPathOperation.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElement.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementProxy.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementProxy.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementRareData.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGElementRareData.h
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGFilterElement.cpp
[modify] https://crrev.com/ad7c7f0de20e3ad160f063f1990c69ce97f7e16f/third_party/WebKit/Source/core/svg/SVGFilterElement.h

Comment 27 by f...@opera.com, Nov 16 2016

Status: Fixed (was: Assigned)

Sign in to add a comment