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

Issue 715048 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

elements applied overflow:hidden and filter:blur doesn't work as expected

Reported by nnnnoe...@gmail.com, Apr 25 2017

Issue description

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

Steps to reproduce the problem:
1. open https://discordapp.com/login
2. open dev tools and find #app-mount > div >div.auth-wrap-background >  div.auth-center > div.auth-blur, you will find it was applied css rules "filter:blur(10px)" and "overflow:hidden", but it's size is equivalent to the login box
3. the blured area is extended out side of this div to the top left bottom right.

What is the expected behavior?
no overflow, like in firefox browser

What went wrong?
overflow:hidden with filter:blur doesn't work as expected

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 58.0.3029.81  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 25.0 r0
 
Labels: Needs-Triage-M58
Labels: Needs-Bisect
Cc: kavvaru@chromium.org
Labels: Needs-Feedback
Unable to reproduce the issue on windows 7 using chrome version 58.0.3029.81 with the below steps

1.opened https://discordapp.com/login
2.Open devtools and find#app-mount
3.Observed the highlighted area for the login 

Observed the same behaviour on Firefox as well.
Could you please find the attached screen cast of both Firefox and chrome behaviour and confirm if anything missed here in triaging the issue.

Thanks,
 
715048.mp4
1.4 MB View Download
Heya; randomly came across this issue. This is indeed a bug with Chrome only on high DPI monitors we noticed a while back. If you're not on that kind of monitor that might be why you're unable to reproduce it.
Components: UI>HighDPI
Labels: -Needs-Bisect OS-iOS
Removing from Bisect bucket since TE was not able to repro.
Labels: -OS-iOS
Components: -Blink>CSS Blink>Paint
Labels: Needs-Bisect
Status: Untriaged (was: Unconfirmed)
I can see this on my Macbook Pro with 59.0.3071.115 (Official Build) (64-bit) (this laptop has a a Hi DPI screen). From the original report, 2.jpg is the correct one, and 1.jpg is the wrong one (the blur should not extend out beyond the login box).

fwiw, unticking overflow:hidden in devtools doesn't change the blur extending beyond the login box.

Test team - can you please try the bisect again, testing on a machine with a HiDPI monitor? The following steps should be enough:

 1. Open https://discordapp.com/login, on a machine with a HiDPI monitor
 2. If blur extends beyond login box (like in 1.jpg), then the bug is present. No need to open devtools.
Components: -UI>HighDPI
Labels: -Needs-Feedback -Needs-Bisect -Needs-Triage-M58 BugSource-User PaintTeamTriaged-20170818
Owner: schenney@chromium.org
Status: Assigned (was: Untriaged)
It's present in 60.0.3112.78 but not 62.0.3169.0. I'll do the bisect.
The bug was fixed by https://chromium.googlesource.com/chromium/src/+/0d09713458f374a911822779fa48bae96b6608ed

which was a revert of a revert. So presumably it was broken way back before the original patch landed. The issue is with mask layers not having the right interpolation properties set at the edges. I'll see now if I can verify the timeline.
Cc: sunxd@chromium.org
Components: -Blink>Paint Internals>Compositing
Owner: sunxd@chromium.org
I could not verify that the original patch that was reverted fixed the problem, or find when the problem started.

The broken behavior is associated with the blurred element behind the auth element. Taking away border-radius in M-60 causes us to ignore the overflow when applying the filter, which seems wrong. So the border-radius for composited content patch of mine probably changed the behavior so that the blur only extends out the sides, not the corners (there was some known issue with the mask going wrong at the boundary).

But sunxd@'s revert of revert does fix it, which is good.

My initial impression is that we WontFix this and just let the M-61 release solve the problem.

But that's for the compositing team to decide.

Comment 13 by sunxd@chromium.org, Aug 18 2017

I would agree that let M-61 release fix the problem.

I don't understand why that patch would fix this bug: after the enabling patch, mask tiling is still disabled for blur-filters, so the behavior should remain the same as before.

Sign in to add a comment