is stripped if siblings are dynamic

[larrikinventures]

The   is treated like a normal space if it is next to dynamic content.

Good: <div>&nbsp;</div>
Good: <div>Static content&nbsp;</div>
Bad: <div>{name}&nbsp;</div>

https://svelte.dev/repl/30b9b4d5610f47459ed2dc06cecfd185?version=3.5.1 shows the various cases. Notice the height of the divs when empty - an   holds the last two open, but the first two just have a normal space. The second div uses a variable which evaluates to just '' (I was checking in case the first render was somehow different/exempt, but it's not).

I could reproduce this in Firefox and Chrome both.

Interesting note - I have a Sapper app where the first instance of this problem is fine, but the rest hit the problem. E.g. if Case is {case}<div>{name}&nbsp;</div>, then in my app case one is fine, and only case two and three are borked.

<Case case="one" name="" />
<Case case="two" name="" />
<Case case="three" name="" />

I'm not sure what makes it work in that one spot....

[larrikinventures]

A workaround if others hit this and don't want to put an explicit height on the div could be to put the nbsp into an ::after with CSS.

div::after {
    content: '\00A0'; /*   */
}

[efeskucuk]

I am working on this, but being still new, no guarantees, in case anyone else wants to get assigned to it.