New issue
Advanced search Search tips

Issue 632549 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

CSS blur() filter wrongly renders when use in CSS transition

Reported by khoinguy...@gmail.com, Jul 29 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36

Example URL:
http://codepen.io/khoi/full/xOJbBq/

Steps to reproduce the problem:
1. Position an element so that its height or width exceeds that of the window.
2. Declare a CSS transition rule on the element.
3. Declare a CSS blur rule on the element when it is interacted (in this case "hover").
4. Hover the element and see the blurring render.

What is the expected behavior?
The element should be rendered as if it exceeds the display.  

What went wrong?
The blur() filter applies on the element as if the element stops at the display.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 52.0.2743.82  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0

This bug (?) does not occur on Firefox.
 

Comment 1 by kojii@chromium.org, Jul 30 2016

Components: -Blink Blink>Animation
Labels: -OS-Windows OS-All
Status: Untriaged (was: Unconfirmed)
This also appears on Chrome for Android.
Labels: Hotlist-Interop
Status: Available (was: Untriaged)
I've come back to this again today. Seems like it also appears when being animated with `animation` CSS rule too.
Unable to repro using requestAnimationFrame() and JS, not a paint issue.
http://codepen.io/anon/pen/JKBxAO
To clarify my above comment, this is definitely a bug in animation code since it's not reproducible with pure JS.
I was able to repro the bug with --disable-threaded-animations so it's an issue with main thread animation code.

We should investigate what the difference is between animations setting the value of filter and JS setting the value of filter.

Comment 7 by suzyh@chromium.org, Aug 2 2016

Labels: Update-Fortnightly

Comment 8 by loyso@chromium.org, Aug 24 2016

alancutter@, the correct cmd switch is: --disable-threaded-animation (without 's), JFYI.
Owner: alancutter@chromium.org
Components: -Blink>Animation Blink>Paint
Owner: ----
Looks like this is a painting/compositor issue.
Can be reproduced with will-change: transform.

https://jsfiddle.net/oys2jzh2/

Components: -Blink>Paint Blink>Compositing Blink>CSS>Filters
Owner: senorblanco@chromium.org
Components: -Blink>CSS>Filters Blink>Compositing>Filters

Sign in to add a comment