Chrome bug: Filter blur offset artifact

[latushko.igor]

Hi.

I trying to animate filter blur effect, but get a problem.

At the end of animation i have a strange artifact by -1px offset to the left top corner and then move back.

Please help to resolve a problem.

 

See the Pen xYYOep by latushko-igor (@latushko-igor) on CodePen

[OSUblake]

Not sure I see any artifacts, but GSAP can't do anything about them because it doesn't do the rendering. You would have to file a bug with Chrome if there is one.

 

That said, applying the filter to the image would look better. And there is going to be a jump when using the blur filter. Maybe don't set it all the way to 0. And I wouldn't worry about setting the webkitFilter. If the browser needs that prefix, its old, and animating a filter will probably be slow.

 

See the Pen GQQWXJ by osublake (@osublake) on CodePen

 

 

[Sahil]

@OSUblake I don't see artifacts either but just some strange jump and flickering while animating on chrome but your demo works smooth on Firefox and Chrome.

[OSUblake]

5 hours ago, Sahil said:

@OSUblake I don't see artifacts either but just some strange jump and flickering while animating on chrome but your demo works smooth on Firefox and Chrome.

 

 

It's because I set the blur to a small value instead of going all the way down to 0. There are several bugs about jumping when the blur radius is small.

 

https://bugs.chromium.org/p/chromium/issues/detail?id=796963

https://bugs.chromium.org/p/chromium/issues/detail?id=795528

https://bugs.chromium.org/p/chromium/issues/detail?id=806291

 

 

Applying a blur is a very costly operation, but you won't see your CPU spike because it's done on the GPU. This article shows a performant way of animating a blur. It crossfades between several copies that have different blur values.

 

https://developers.google.com/web/updates/2017/10/animated-blur

 

 

[latushko.igor]

Thank you very much, guys!

[Jonathan]

Hello @latushko.igor and Welcome to the GreenSock forum!

 

When I tested your codepen in latest Chrome I do indeed see the -1px offset flicker artifact you are posting about.

 

Previously we had to use the onUpdate way, due to the  lack of browser support of CSS Filters. But since the browser devs are constantly updating their browsers every month, support has increased for CSS Filters.

 

When I apply the effect using a fromTo() tween, without the older way of doing this with an onUpdate, then I no longer see this flicker in Chrome.

 

TweenMax.fromTo(".box", 1, {
  webkitFilter: 'grayscale(100%) blur(5px)',    
  filter: 'grayscale(100%) blur(5px)'
},{
  webkitFilter: 'grayscale(0%) blur(0px)',    
  filter: 'grayscale(0%) blur(0px)',
  immediateRender:false,
  repeat: -1,
  yoyo: true
});

 

Try this with the fromTo() tween and see how that works:

 

See the Pen ZrrRxw by jonathan (@jonathan) on CodePen

 

Also i opt to leave the webkitFilter property included, so older versions of webkit, as well as various webkit and safari on mobile are supported, since I am OCD when it comes to browser compatibility.

 

Happy Tweening!

 

Resources:

https://greensock.com/docs/TweenMax/static.fromTo()

 

[OSUblake]

Browser support aside, manually applying a filter is still useful because you can animate each filter independently.

 

var tl = new TimelineMax({ onUpdate: applyFilter })  
  .to(filter, 1, { hueRotate: 360, repeat: 3 }, 0)
  .to(filter, 3, { blur: 5 }, 0)
  

 

[Jonathan]

@OSUblake Im not ripping against using an onUpdate, I still use it myself and it is very useful.

 

But I've seen recently in the past 2 years or so when interpolating CSS Filters, that Chrome sometimes isnt rendering CSS Filters correctly when it is an onUpdate. Either only doing a partial render or no render at all for either start or ending state. Sometimes the issue being the initial default start values that are not defined in the CSS or via set() method.

 

I've seen that it does work correctly with a fromTo(), since your basically telling GSAP the start and end values to pass to the browser. So onUpdate is still useful, but it is subject to the syntax used in the onUpdate, especially when tweening CSS Filter values. This is also due to CSS syntax changing constantly which has forced me throughout the years to constantly change my CSS syntax used in onUpdate, due to the CSS spec changes.

 

But now I have had to opt for just allowing GSAP to tween the values like any other CSS properties due to the wider browser support of CSS Filters now supported.

 

You know what I mean?

 

[latushko.igor]

Big thx for solution! But with fromTo() animation is not so smooth like with using to() method.