New issue
Advanced search Search tips

Issue 713675 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Sep 21
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

When an element with background image has scale animation, the image flickering

Reported by rrolan...@gmail.com, Apr 20 2017

Issue description

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

Example URL:
http://codepen.io/anon/pen/bWpNYq

Steps to reproduce the problem:
1. Open the test page: http://codepen.io/anon/pen/bWpNYq
2. Watch the animation as it scales down form 1.1 to 1.0.
3. You can see that the scale is not smooth, the image is flickering

What is the expected behavior?
http://codepen.io/anon/pen/pPyvdp

Here is the same test page, but this time and img element shows the image. If you compare with the background image example, it is much smoother.

What went wrong?
The background image flickers when transform scale animated.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 57.0.2987.133  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

It happens on OSX and Windows too.
It Flickers in:
- Chrome
- Opera
It works fine in:
- Safari
- Firefox
 

Comment 1 by rrolan...@gmail.com, Apr 20 2017

When the same animation applied as CSS transition, it is smooth. So this issue could be JavaScript related as GSAP does the tweening.

Comment 2 by kojii@chromium.org, Apr 21 2017

Components: -Blink Blink>Paint
Can't repro on Mac and I don't have Win to confirm, sorry.

I'm not sure if this is paint or animation, could paint have a look first?
We tried on win 7, win 10 and osx with Chrome 57 and Chrome 58 too. We saw the same flickering. You should see it on the right side of my example and it is getting stronger when the animation near to the end.

Related topic in GSAP forum:  https://greensock.com/forums/topic/16385-chrome-bug-when-i-scale-an-element-with-background-image-the-image-flickers/?p=72149

Cc: jmukthavaram@chromium.org
Labels: -Type-Bug -Pri-2 hasbisect-per-revision M-60 OS-Linux OS-Mac Pri-1 Type-Bug-Regression
Status: Untriaged (was: Unconfirmed)
Able to reproduce this issue on windows 7, Mac 10.12.4,Linux Ubuntu 14.04 with Chrome stable version-58.0.3029.81 and Canary-60.0.3076.0.
Manual Bisect:
-------------
Good-49.0.2574.0 -Revision-361527
Bad-49.0.2575.0 -Revision-361776

Per revision Bisect Tool Info:
----------------------------
You are probably looking for a change made after 361524 (known good), but no later than 361569 (first known bad).
CHANGELOG URL:
The script might not always return single CL as suspectas some perf builds might get missing due to failure.
https://chromium.googlesource.com/chromium/src/+log/476ff9cb5eab812c728eb3115f67dd7f0abdc6ac..bff0406758c723c2da6167e0eef6277f05a0c552

Unable to find the suspect from the above change log.Could anybody from dev team please look into this issue.

Thanks in advance..!!
Labels: -Pri-1 -Type-Bug-Regression -M-60 PaintTeamTriaged-20170421 BugSource-User Pri-2 Type-Bug
Owner: schenney@chromium.org
Status: Assigned (was: Untriaged)
This is a known issue, probably a duplicate of 608874, or at least a very similar problem. The plan is to try to fix all these in the very near future, but it's a big job.

Bugs as old as M-49 are not regressions.
Status: WontFix (was: Assigned)
The scale is pretty smooth now, but not as smooth as the img case. I suspect due to more resampling going on in the background case.

Sign in to add a comment