Sporadic formatting issues (rendered text too narrow)

[kodster28]

Occasionally (very difficult to reproduce), we've noticed the footnote content rendering very narrowly (in a way that doesn't quite match the container).

[kodster28]

At least in our repo, think we can get around it by setting the following property explicitly?

.littlefoot__content {
  width: 100% !important;
}

Testing with width: some lower % seems to repro the behavior.
Live demo

Screenshot

[goblindegook]

Interesting, thanks for reporting this. Are you using the pre-release versions? Which browsers have you found the issue on?

[kodster28]

Chrome, at least in terms of what folks were reporting.

Not using any pre-release versions. Was using 4.0.0-9, but recently upgraded to 4.0.0-10.

[goblindegook]

Released 4.0.0-11 with some changes that will hopefully address the issue. Please let me know if you continue to notice it.

[kodster28]

Absolutely will do, thanks!!

[nqst]

Hey folks, thanks for making a great package!

This problem seems to be still relevant, even after updating to the last version:

The possible culprit is that .littlefoot__wrapper has dynamically added max-width: 40px in its style attribute. If I remove it in Web inspector, the problem is gone.

[kevin1]

I guess this is probably the culprit:

littlefoot/src/dom/footnote.ts

Line 99 in 0ca530e

wrapper.style.maxWidth = content.offsetWidth + 'px'

[kevin1]

I am able to reproduce the issue with these steps:

1. Reload the page
2. Resize the browser window before any footnotes have been opened
3. Open a footnote

Resizing the page causes this to run:

littlefoot/src/dom/footnote.ts

Lines 96 to 101 in d709002

	resize: () => {
	if (isMounted(popover)) {
	popover.style.left = getLeftInPixels(content, button) + 'px'
	wrapper.style.maxWidth = content.offsetWidth + 'px'
	repositionTooltip(popover, button)
	}

The code computes a very small max-width value because content.offsetWidth is zero when the footnote is not mounted, which is always true on first load.

This should be gated by isMounted, which is checking for popover.parentElement:

littlefoot/src/dom/footnote.ts

Line 25 in d709002

const isMounted = (popover: HTMLElement) => !!popover.parentElement

Because of the way elements are created during littlefoot setup, popover.parentElement is always an empty div on first load:

littlefoot/src/dom/document.ts

Lines 48 to 51 in d709002

	function createElementFromHTML(html: string): HTMLElement {
	const container = document.createElement('div')
	container.innerHTML = html
	return container.firstElementChild as HTMLElement

[goblindegook]

Thanks for investigating the issue!