Fix Webkit scroll issue

[JayPanoz]

Resolves #136

I am really open to any alternative idea but it is pretty much the only working resolution I could achieve due to getting around Webkit’s lifecycle issues e.g. it won’t even work if it is not called at the end of go_progression when it’s used, and it works only partially in the sense Webkit doesn’t graphically render the overflowing content – with a reference of the viewport to render progression is 0, hence why the triggering of the scroll event.

Really tried to make it happen before show as well, but there is pretty much nothing you can rely upon if you want to use a resize or mutation observer…

It is worth noting I cannot fully explain what the bug is, based on the fact it is pretty much impossible to debug, a recalc/reflow resolving the non-scrollable issue.

@chocolatkey Maybe another pair of eyes can spot something I did not consider in the last 2 days. Please let me know if you need clarifications as this bug and its resolution are pretty convoluted.

[chocolatkey]

@JayPanoz Which webkit-based platforms were you trying this out on? OSX, iPhone, iPad, or all?

[JayPanoz]

All. Basically had Safari locally on MacOS, iPadOS and iOS on BrowserStack.

My gut feeling tells me it applies to all browsers using WebKit though, due to the fact it smells like a race condition during rendering. I have not checked the source code of WebKit because I have no clue where to start as I can't fully explain this bug but it's nasty.

[chocolatkey]

@JayPanoz OK, I'll try a few things just to make sure I can't find anything. Were you using thorium web or the vanilla reader in this repo? I'll probably try using the vanilla reader

[JayPanoz]

Thorium Web, I guess it is a good idea to test the vanilla reader to scope down the issue.

It should be ready-to-reproduce on scroll-ui.thorium-web.pages.dev

Just to make sure, the pattern to reproduce is:

• when switching from paged to scroll it works without any issue – the custom property is set dynamically
• while in scroll, once you navigate to a resource which was not in the pool, scroll event does not register – the custom property was added into the blob.

While scroll does not register, the scrolling element has no issue scrolling through scrollTo, scrollTop, etc.

Any reflow will make the bug disappear e.g. resizing the window. This means the app shell can accidentally resolve the issue on re-render, etc.

[chocolatkey]

@JayPanoz I haven't found the culprit yet, and I don't want to hold up your progress longer. As you mentioned, debugging it is very tedious. iOS 26 doesn't make a difference.
Have you considered filing a webkit bug with a minimal reproducible testcase?

[JayPanoz]

@chocolatkey No worries, I was focusing on readium/css#190 since I have a gut feeling they may be related in some way (rendering path on scroll) and one issue could help explain the other.

I tried removing components to make sure they were not interacting so there was literally the container left in the app, tried removing CSS that could be problematic from various SO threads in the app, then in Readium CSS, etc. But I have zero clue at the moment.

This is the fundamental problem with both issues: I can’t really tell why they happen, and it’s nearly impossible to create a minimal reproductible test case because of that.

[JayPanoz]

I will merge this fix as it’s blocking for Thorium Web v.1 but will continue debugging in order to find a nicer alternative in the upcoming weeks, and report the issue in Webkit tracker. Hopefully it should be trivial reverting if we can implement something else, or resolve the issue at its root so that it does not happen in the first place.