search

kiwix / kiwix-js

Fully portable & lightweight ZIM reader in Javascript
https://www.kiwix.org/
GNU General Public License v3.0
313 stars 136 forks source link

Scrolling of graphical landing pages broken in Restricted mode #1132

Open Jaifroid opened 1 year ago

Jaifroid commented 1 year ago

First reported downstream in https://github.com/kiwix/kiwix-js-windows/issues/475, the graphical landing page of recent ZIMs does not scroll when loaded with jQuery mode. This issue is serious because it also affects the libzim branch of this Repo in ServiceWorker mode, suggesting that it's a wider issue than just the lack of JS support in jQuery mode.

These graphical landing pages are very troublesome. They render extremely poorly on Android (extremely slow outside of the OPFS implementation), and also break the WebP polyfill due to overloading the Emscripten engine and filling up the memory.

charanbhatia commented 4 months ago

hi, can you please assign this issue to me. I want to work on this.

Jaifroid commented 4 months ago

@charanbhatia This is a "medium-level" PR. If you would describe yourself as a beginner, it's probably not viable, as it would require working at quite a low level with CSS and JS. Also it is tricky because to make it work we'd probably have to alter the contents coming from the ZIM on-the-fly, and that's something we normally don't do on principle. So it would need to be done in a minimally invasive way, considering it is for Restricted mode only.

If you think you're still interested, then please state your level of experience with JS and CSS.

AyushSahoo19 commented 1 month ago

Hi, my name is Ayush, and I’m from India. I’ve explored the Kiwix JS repository and read through the contribution guidelines. I’m really fascinated by the idea of bringing web resources offline using ZIM archives, making knowledge accessible even without internet connectivity.

I’ve gone through the reported issue regarding the graphical landing page of recent ZIMs not scrolling properly in jQuery mode, as well as its impact on the ServiceWorker mode. From what I’ve understood, this issue seems to be caused by improper resource caching and memory management, especially on media-heavy landing pages. Additionally, the Emscripten engine might be overloaded with too many tasks, leading to slow performance and breakage of the WebP polyfill.

I am ready to work on this problem and help resolve it by optimizing the service worker’s caching strategy, implementing lazy loading for heavy resources, and improving memory management to ensure better performance across different devices, especially on Android. I’m excited to contribute and help enhance Kiwix’s functionality.

AyushSahoo19 commented 1 month ago

So, Is anyone currently assigned to or working on this issue?

Jaifroid commented 1 month ago

@AyushSahoo19 Thanks for your interest in this issue. It's a tricky one, because it only affects Restricted mode (aka JQuery mode), and that is likely due to the fact that JS doesn't run in that mode. This isn't a resource management issue in KJS, as we have already optimized caching as much as possible (we have three different levels of caching), and for browsers that have to use the WebP polyfill (i.e. old browsers) we have a well thought out queuing strategy to avoid overwhelming the WebP engine.

You're welcome to take a look at it, but my feeling is, as stated above in response to a previous enquirer, that the only way to fix this is either at source in mwOffliner (the scraper), or by altering the HTML coming from the ZIM. As this only really affects users of very old browsers, and the bug doesn't stop them from using the ZIM by searching for articles, I don't think it's high-enough priority to do such extensive work. The only exception would be if you found a really easy and quick solution for this. Anything else would be a waste of your time, tbh.

AyushSahoo19 commented 1 month ago

Thank you for the feedback! For a quick fix to the scrolling issue in Restricted mode, I’m considering a combination of CSS adjustments and minimal HTML changes. Here’s the plan:

Quick Fixes:

  1. Smooth Scrolling: We can enable smooth scrolling with CSS scroll snap to create a more seamless user experience.
  2. Overflow & Max-Height: Implementing CSS overflow and max-height properties will ensure that everything scrolls nicely within the viewport, particularly for older browsers.
  3. Simplified Layout: Utilizing Flexbox can help us achieve a more responsive layout that remains compatible across various environments.
  4. HTML Modifications: I suggest simplifying the HTML structure by reducing unnecessary nested elements, which should enhance rendering and scrolling behavior.

Could you advise on which of these fixes might be the most effective to pursue? Additionally, could you point me to the specific file in mwOffliner (the scraper) that I should focus on for implementing these changes?

Source of HTML: Where can I find the HTML files generated by the ZIM for modification?

Testing Changes: How can I test the changes to the HTML from the ZIM to ensure they work properly in Restricted mode?

CSS Files: Which CSS files are linked to the HTML generated from the ZIM, and where can I find them for modification?

Jaifroid commented 1 month ago

@AyushSahoo19 mwOffliner is a separate Repository. You can find it here: https://github.com/openzim/mwoffliner/issues . To be clear, if you want to work on the scraper side, then you would need to work with the devs in that Repo. This Repo is for work on the Kiwix JS reader only, so work on this issue done here would be about injecting CSS or modifying the HTML coming from the ZIM.

I actually don't think there's much to be done about this issue, and as mentioned it only affects a tiny number of users. You might be better off picking another issue to work on. For example, if you can get the Ubuntu Touch emulator working, then #1279 might be more fruitful for you, and is probably a simple fix (but it has to be tested in the correct emulator on Linux).