CSS filter forces element to be drawn on top
Reported by
johanrin...@gmail.com,
Aug 27
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/68.0.3440.106 Chrome/68.0.3440.106 Safari/537.36 Steps to reproduce the problem: JSFiddle replication: http://jsfiddle.net/rj90be24/ 1. Create two elements, force overlap by setting `margin-top: -128px` on the lower one. 2. Apply `filter: blur(1px)` to the upper one 3. Observe that the upper element is drawn at a higher z-index than the lower one What is the expected behavior? The element with higher z-index is drawn on top What went wrong? The element with `filter` applied is drawn on top Did this work before? N/A Does this work in other browsers? Yes Chrome version: 68.0.3440.106 Channel: stable OS Version: Ubuntu 16.04 LTS Flash Version: Discovered in this Reddit thread: https://www.reddit.com/r/webdev/comments/9aml6g/overlay_not_being_rendered_on_chrome_react_with/
,
Aug 27
,
Aug 27
Apparently filtering messes up the layers. One to fix with BGPT or SPv2.
,
Aug 27
Working as intended. CSS z-index only applies to positioned elements: https://www.w3.org/wiki/CSS/Properties/z-index CSS filter forces a stacking context to be created, but the effective z-index will be 0 by default. A bug should be filed against Firefox Quantum. |
||||
►
Sign in to add a comment |
||||
Comment 1 by johanrin...@gmail.com
, Aug 27