[Webkit-unassigned] [Bug 273208] New: Applying CSS-Filter breaks with https://www.w3.org/Style/CSS/multi-column

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=273208

            Bug ID: 273208
           Summary: Applying CSS-Filter breaks with
                    https://www.w3.org/Style/CSS/multi-column
           Product: WebKit
           Version: Safari 17
          Hardware: Unspecified
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: stevestasteislost at icloud.com

CSS-filters break the box-model!
In my case I’ve built a page with a footer-Area. It ist there for some additional text. And as it might have a wide inline-size, I gave him columns.
Then I made a hoovering-area in some corner of the page. Its elements represent sth. like versioning: if you hoover over element „x“, the page shall give you a big hint where the version-„x“ infos are to find.
I decided to do that with a filter:

```
footer {
        padding- …
        margin- …
        columns: 5 40ch;
        column-gap: 24pt;
        column-fill: balance-all;
        overflow: auto hidden;
}

…

body:has(version-section ol > li:nth-child(1):hover) [version="0"],
body:has(version-section ol > li:nth-child(2):hover) [version="1"],
body:has(version-section ol > li:nth-child(3):hover) [version="2"],
body:has(version-section ol > li:nth-child(4):hover) [version="3"] {
        &[version] {
                outline-style: solid;
                filter: grayscale(0);
                transition: filter 1s ease-in-out;
                animation: blinker 1s ease-in-out infinite alternate;
        }
}
@keyframes blinker {
        from { filter: invert(0%); }
        to { filter: invert(100%); }
}
```

Doesn’t look look bad. But: when hovering over „version y“, the paragraphs don't flow in the columns, they break their styling and insist to be a pure block-element running down (and so will not be shown in their full size: the footer area is set to scroll horizontally).

Tested the page with an actual firefox. No rules to make differences, both get the same html and same css rules. Firefox does filter the columns as expected. And it doesn't tend to an empty column at the end.


BTW: Columns don’t look really good as they tend to have at least an empty column at the end! And: who made the routines for drawing column rules? Resize the area with columns and get some vertical strike throughs! …

Hey, what’s that? while I’m writing here, my page with all this hovering things behind this window: sometimes(!) when moving my mouse INSIDE the active window, the hoover-event is beamed through this window and toggles the elements in the back window! Click-trhough is sth. to be discussed. But hoovering-through? Is this another idea of Sirius cybernetic? Because people are to blind to see: every web-page MUST be blurry as EVERY single pixel must be anti-aliased. Or: who has an 96dpi-Monitor? And what’s the distance, the user is looking at it? (https://www.w3.org/TR/CSS22/syndata.html#length-units at the end, just before https://www.w3.org/TR/CSS22/syndata.html#percentage-units). Long lives the kings body, beware of the effects of https://en.wikipedia.org/wiki/Gravitational_wave, when this body fades away and the new measures are slated to the size of asses …

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240424/0d408f63/attachment.htm>