New issue
Advanced search Search tips

Issue 597536 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 430867
Owner: ----
Closed: Mar 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug-Regression



Sign in to add a comment

CSS Filters breaks when using it with CSS Columns

Reported by shadeed9@gmail.com, Mar 24 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Steps to reproduce the problem:
1. Create a div with height of zero and padding-bottom of 50% (Responsive image wrapper).
2. Add an image inside it.
3. Repeat step 1 to create more divs and then wrap them in a container.
4. Apply CSS columns to the container.
5. Apply a filter like sepia when hovering on the image.

What is the expected behavior?
To apply the filter on the image.

What went wrong?
Some images got the hover effect, and the others completely break (turn into white image).

Did this work before? No 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 21.0 r0

Please check this reproduced demo of the issue on Codepen:
http://codepen.io/shadeed/pen/99cb0149e43e5e9df82f930fca9049fe
 
css-filters-break.mov
1.3 MB Download

Comment 1 by rsesek@chromium.org, Mar 24 2016

Components: Blink>CSS

Comment 2 by loyso@chromium.org, Mar 28 2016

Components: Blink>Layout>Table
Labels: Hotlist-Interop
Status: Available (was: Unconfirmed)
Works in Firefox.

Comment 3 by loyso@chromium.org, Mar 28 2016

Labels: -OS-Mac OS-All
Components: Blink>Layout>MultiCol Blink>CSS>Filters
How does it relate to tables? The codepen does not have any table element or display: table and the like...
Components: -Blink>Layout>Table

Comment 6 by shadeed9@gmail.com, Mar 29 2016

There are no relation to tables. It is about using CSS Columns along with CSS filters, notice the element with class 'featured-main__row'.

Comment 7 by timloh@chromium.org, Mar 29 2016

Reduced a bit. Two green boxes should span the width of the page (aside from a small white gap), but only the left box displays. Works in FF.

http://codepen.io/anon/pen/GZvgpb
Note: removing "overflow: hidden" fixes it. Likely a dupe of  http://crbug.com/430867 .

Comment 9 by nainar@chromium.org, Mar 30 2016

Mergedinto: 430867
Status: Duplicate (was: Available)
Components: -Blink>CSS>Filters Blink>Compositing>Filters

Sign in to add a comment