New issue
Advanced search Search tips

Issue 647437 link

Starred by 3 users

Issue metadata

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

Blocking:
issue 701521



Sign in to add a comment

Color filter extension breaks gmail, others

Project Member Reported by pdr@chromium.org, Sep 15 2016

Issue description

Version: 55.0.2853.0/dev linux, also 53 (stable) on a hidpi mac

What steps will reproduce the problem?
(1) Install https://chrome.google.com/webstore/detail/color-enhancer/ipkjmjaledkapilfdigkgfmpekpfnkih
(2) Turn the feature on using the color enhancer icon.
(3) Load gmail.com
(4) Notice the chat area is all white, resizing the browser fixes this.

The extension uses SVG filters so I think we've introduced a filter invalidation bug. We need to bisect this to proceed. We have an internal report of this occurring on an unspecified banking site too.
 

Comment 1 by pdr@chromium.org, Sep 15 2016

These repro steps may be easier:
(1) Visit https://www.discover.com/online-banking, notice there is a movie that plays in the background where stock photography is panned around.
(2) Install https://chrome.google.com/webstore/detail/color-enhancer/ipkjmjaledkapilfdigkgfmpekpfnkih
(3) Click the color icon and enable the extension
(4) Visit https://www.discover.com/online-banking, notice the movie does not play

Comment 2 by pdr@chromium.org, Sep 16 2016

Cc: chrishtr@chromium.org dmazz...@chromium.org
Owner: senorblanco@chromium.org
Status: Assigned (was: Available)
After installing the extension the entire discover online banking page turns white in stable. I bisected that down to https://chromium.googlesource.com/chromium/src/+/711409eabeacb27e2debfd5a7be631a1967f500f

@senorblanco, can you take a look? Your patch may have just exposed an existing bug in the extension. If so, please assign to dmazzoni. Alice's gmail shows tile invalidation bugs with the extension and stable and hidpi though, so there may also be a second invalidation bug here.

Comment 3 by pdr@chromium.org, Sep 16 2016

Labels: -Needs-Bisect
Hmm. This should've been fixed by https://codereview.chromium.org/2278273004. Will dig deeper.

Comment 5 by shuto...@gmail.com, Feb 12 2017

Any update on this? After applying SVG filters to <html> page repaint doesn't occur until you scroll or modify some property (eg. transform). For example at Google image search page, you are unable to see what you type.

To reproduce go to google.com image search, type "Flowers", then execute 
```
var d = document.createElement('div');
d.innerHTML = `
<svg>
  <filter id="my-filter">
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
  </filter>
</svg>
`;
document.body.appendChild(d);
document.documentElement.style.filter = 'url(#my-filter)';
```
in console and type "Trees". Nothing will change until you scroll.

Windows 10
Chrome 56.0.2924.87
Chrome 58.0.3010.0
Blocking: 701521

Comment 7 by wnwen@chromium.org, Mar 22 2017

Unable to reproduce #5 in 57.0.2987.110 for Chrome on Linux

Comment 8 by wnwen@chromium.org, Mar 22 2017

Was able to repro in 57.0.2987.110 for Chrome on Mac, although one workaround is to just switch to a different tab and back, and the UI will update.

Comment 9 by wnwen@chromium.org, Mar 22 2017

@Stephen - if it helps, seems like the high contrast extension works but the color enhancer doesn't work on gmail and calendar.

The only difference I can see (after editing code to make the two use similar code paths) is that high contrast uses feComponentTransfer whereas color enhancer uses feColorMatrix. Could there be a bug in how the two are handled differently that's causing the entire page not to be updated/repainted?
Interesting. feColorMatrix has an optimization which feComponentTransfer does not, but only if the element they're applied to is composited (you can force that with by adding "will-change: transform;"). I don't think that's the case with the repro in #5, although it may be the case in GMail. You can see which elements are composited by enabling "Layer Borders" in the devtools.

If they're going through the non-GPU path, then I don't think there are any optimizations which feColorMatrix gets which feComponentTransfer doesn't.

Another possibility is to set the filter region (i.e., by setting x, y, width and height on the <filter> element). There is a known issue there when it is applied to a composited element whose bounds change, but again, I don't think that's the case in #5.

Comment 11 by wnwen@chromium.org, Mar 27 2017

Yes, setting the filter region to x=0, y=0, width=height=99999 fixed color enhancer extension. Now everything updates normally (gmail, calendar, movies).
I'm going to lower to pri-2, since there's a workaround. Feel free to raise it back up if you disagree.
Labels: -Pri-1 Pri-2

Sign in to add a comment