Scrollbar staying visible due to external CSS

[ristew]

Describe the bug

When using Blockly with a framework that pulls in https://github.com/jensimmons/cssremedy, notably TailwindCSS, the following style is applied:

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

This makes it so the flyout scrollbar will stay visible even when it shouldn't, because it is using the SVG attribute which is overridden by the CSS display property. As such, for a workaround I am using:

svg[display="none"] {
  display: none;
}

Screenshots

[alschmiedt]

As far as I know, using global selectors like this is not generally encouraged. I believe for this exact reason. People use Blockly with a wide variety of libraries so it is difficult for us to cater to all of the different libraries with rules like this. For this reason, I believe the fix you have above is the correct way to go.

I'm going to add the 'won't fix' label, however if I have missed something or misunderstood feel free to respond! Thanks!

[nbudin]

This came up in an issue on react-blockly as well with a Tailwind user. I came up with a similar workaround, although I think the one mentioned in this issue description might work even better.

One possibility here might be to use the style attribute of the <svg> element, which I think will avoid this problem. Blockly is already generating a style attribute for this element, so it may be possible to add display: none in there.

I do agree in general that global attributes like this should be avoided, but the reality is that Tailwind is a fairly popular library and it's likely people will continue to try to use it with Blockly. I don't love library-specific workarounds, but this issue seems like a pretty big footgun, and if my theoretical solution works, it doesn't seem like it'd make Blockly any worse if implemented.

[ninjadev64]

Adding

svg[display="none"] {
    display: none;
}

to my app.postcss fixed the issue, thanks!