[bug] wrong horizontal scrollWidth property in Firefox browser

[ericworks]

Firefox seems not reading the container's scrollWidth correctly, hence every time I scroll from left to right, the story river's scrollWidth increases; and everytime I scroll from right to left, the story river's scrollWidth decreses.

As the screen recording shows, this inconsistent scrollWidth property break the tiddler navigation. i.e. clicking on a stacked tiddler on the right won't navigate to and unfold the tiddler. Tiddler navigation works when clicking on a stacked tiddler on the left, but not the other way around.

Interestingly, I found a hack for it, simply add a placeholder after the ending tiddler with following content:

<section style="position: relative;width: 1px;height: 1px;border: 1px solid #bbb;" id="hack_firefox_horizontal_scroll">
</section>

right before the section.story-frontdrop under section.tc-story-river, would solve the issue. The place holder must have some width & height. I tried, and found out that it won't work if the border is removed (which then has width 0 and height 0).

I have no idea why Firefox behaves like this, and why this hack works out of the box... I'm just guessing it's related to position: sticky and the fix works by adding something with position: relative, which kind of sounds like float and clear: both thing.

[crazko]

Thanks for your comprehensive report! I can reproduce it, it's weird. I will try to dig in a bit to try find a solution without the hack :)