nobr breaks css

[Muderru]

Describe the bug. I have gradient background background: radial-gradient(ellipse at center, var(--color1) 0%,var(--color2) 40%,var(--color3) 100%);. Without nobr macros everything looks fine. But if I use nobr in tags or passage body gradient is split up on repeating block areas.

Expected behavior. I want my page graphically looks the same with and without nobr.

Screenshots. Without nobr With nobr

Project details.

• SugarCube Version: [2.36.1]
• Compiler & Version: [Tweego 2.1.1]

Desktop details.

• OS & Version: [Windows 10]
• Browser & Version [Edge 103 (64-bit), Firefox 102 (64-bit)]

[tmedwards]

You're going to need to show more details than that.

1. What do the whole CSS rule(s) look like, don't just show some properties, and where are you setting those rule(s)?
2. What does the contents of that passage look like?

[hituro]

I think this is a css issue. I get the same effect if I don't supply a background-size property to the gradient. Probably an instance of the bug described here: https://stackoverflow.com/questions/43297619/why-doesnt-background-size-100-100-work-anymore-in-firefox

The following works in Firefox (assuming the style is applied to body)

background: radial-gradient(ellipse at center, red 0%,blue 40%,green 100%);
background-size: 100vw 100vh;

Without the background-size I get the same stripes, even if the passage is empty

[Muderru]

Thanks, background-size: 100vw 100vh; is help. On Edge it works too.

1. What do the whole CSS rule(s) look like, don't just show some properties, and where are you setting those rule(s)?

I use slightly modified Bleached style where solid colors are replaced on gradients.

2. What does the contents of that passage look like?

Invisible initialized loop.

[tmedwards]

Apparently this was a CSS issue.