<span> > <style> wrapping in elm-css 17 has unexpected side effect inside grid container

[ymtszw]

In elm-css 17.0.1, <style> is wrapped in <span> to guard against some browser extension mess-ups.
The intention is good but it has unexpected side effect inside grid container.

SSCCE: https://ellie-app.com/g3z4zCTShLfa1

This example uses following style on container div:

._5c4fac34 {
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    display:grid;
    align-items:center;
    justify-items:center;
}

This is a convenient "just stay center!" container style, which can horizontally/vertically center its direct child via align/justify-items: center.

We were using this for creating "backdrop" area of modal dialogs and working pretty well.

However with elm-css 17.0.1, such container now hosts an additional child which is <span> containing style node, and that <span> now takes up a portion of the grid container since it is (at a glance from grid container) an ordinary element!

Screenshot from SSCCE:

A quick workaround is to put display: none; to wrapping <span>s. At least it works for this particular example, tested from dev console:

[ymtszw]

I could send a PR but the proposed workaround might or might not work to solve the situation originally raised in #542

It would be great if you can catch this @bcardiff cc @rtfeldman

[rtfeldman]

@ymtszw Thanks for reporting this, and for finding a workaround!

Here are some next steps that make sense to me:

• @ymtszw It sounds like wrapping <span style="display:none"> (instead of <span>) around the <style> fixes this grid container issue. Is that right?
• @bcardiff Can you confirm if using <span style="display:none"> around the <style> still fixes Wrap style node to deal with DarkReader #542?

If so, sounds like we have a straightforward fix for this!

[ymtszw]

That’s right. At least apparently. 2021年12月6日(月) 22:38 Richard Feldman ***@***.***>:

…

@ymtszw <https://github.com/ymtszw> Thanks for reporting this, and for finding a workaround! Here are some next steps that make sense to me: - @ymtszw <https://github.com/ymtszw> It sounds like wrapping <span style="display:none"> (instead of <span>) around the <style> fixes this grid container issue. Is that right? - @bcardiff <https://github.com/bcardiff> Can you confirm if using <span style="display:none"> around the <style> still fixes #542 <#542>? If so, sounds like we have a straightforward fix for this! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#557 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABCML5QUZ327X3TRU3W3CWLUPS4FZANCNFSM5JOP3CPQ> .