[Webkit-unassigned] [Bug 273208] multi-column in grid context layout

[bugzilla-daemon at webkit.org]

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

--- Comment #15 from Karl Dubost <karlcow at apple.com> ---
With hover:

=============================================
version-section {
     & ol {
        & > li {
            padding-block: 0.125lh;
            padding-inline: 3ch;
            color: rgb(250 50 50 / 0.3);
        }
    }
}
 version-section {
     & ol {
         & > li {
            &:hover {
                color: rgb(255 100 100 / 1);
                opacity: 1;
            }
        }
    }
}
=============================================



Without hover:
=============================================
 version-section {
     & ol {
        & > li {
            padding-block: 0.125lh;
            padding-inline: 3ch;
            color: rgb(250 50 50 / 0.3);
        }
    }
}
=============================================



Disabling in

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"] {
    filter: grayscale(0);
    transition: filter 1s ease-in-out;
    animation: blinker 1s ease-in-out infinite alternate;
}


this rule:
    animation: blinker 1s ease-in-out infinite alternate;

fixes the issue. 

But Safari is losing obviously the visual animation. 
So the background blinking shadowy color is what seems to modify the content here. 


aka 

@keyframes blinker {
        from { filter: invert(0%) drop-shadow(3px 3px 2px red); }
        to { filter: invert(25%) drop-shadow(3px 3px 2px blue); }
}

ok let's get rid of the animation. 

And just try two states:

ok if I set a value different from grayscale(0) on 

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"] {

/* THIS HERE */
    filter: grayscale(0);

    /* transition: filter 1s ease-in-out; */
    /* animation: blinker 1s ease-in-out infinite alternate; */
}

the top of the 2nd column disappears. When I put it back to 0. It takes *too much time* to reappear.

-- 
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/20240430/fec17a9a/attachment.htm>