Some images are not displayed properly in jQuery mode with latest sotoki-based ZIM files

[mossroy]

With http://tmp.kiwix.org/alcohol_meta_stackexchange_com_2021-08.zim , if you open the "About" page of its content, you have this content in ServiceWorker mode :

but you have this in jQuery mode :

It seems to be because it tries to directly open these images through the network :

I suppose they are not matched by the regular expressions that look for images in jQuery mode?

[kelson42]

This is a CSS applied picture.

[kelson42]

This ticket might be related to #338?

[Jaifroid]

This is a CSS applied picture.

Normally CSS images just work in Kiwix JS in jQuery mode, because the content of CSS files is extracted and inserted as <style>...</style> tags. These images look like they are extracted from the ZIM. The fact that we cand find them in SW mode, but not in jQuery mode suggests an issue with our image-extraction routine in jQuery mode when dealing with no-ns ZIMs, as @mossroy suggested. I'll check now if this is a quick fix.

[Jaifroid]

@kelson42 You were right. What happens is that normally CSS images work because they are embedded images (dataURIs for example). In this case, they are images that need to be extracted from the ZIM. See screenshot of one of these in CSS code below.

@mossroy We don't currently apply the image parsing to CSS in jQuery mode. It could be a bit tricky, as I'm not sure if the browser would re-parse it's CSS when we change an image URL, after the CSS has been applied. I think we would need to extract the image and insert it as a BLOB or dataURI into the CSS before it is applied to the document.

A qucik-and-dirty fix would be to add common images in common ZIM CSS to our own filesystem. Of course it's not a universal fix.

How would you like to deal with this?

[kelson42]

FYI, I believe I have a piece of JS in MWoffliner, based on a regex, which does such a rewritting.

[mossroy]

It looks like a jQuery-specific enhancement to catch-up what is natively done by the browser in ServiceWorker mode. Unless it's critical, I wouldn't bother and label this as "wontfix". Here, these icons are not visible in "About", but are visible in the Questions/Answers (except the "external link" icon?)

[Jaifroid]

It might be worth doing a quick experiment to see whether changing the link to a blob after the CSS has been applied causes browsers to insert the images. If so, the fix would be very simple. If not, the fix would be more complicated.

[mossroy]

If you want, but let's take care this would be straightforward

[kelson42]

Should we keep that ticket open or close it as won't fix?

[Jaifroid]

Let me do the experiment I mention above, and if it's simple we can apply the fix. If complicated, wontfix.

[Jaifroid]

This issue is somewhat related to #975, in that we are dealing with images embedded in CSS. However, in that case, the images are being pulled from the Web (or not being pulled in our case probably due to CORS), and it needs to be fixed upstream in mwOffliner. In this case, we need to fix locally, and I'd still be in favour of fixing in jQuery mode because I suspect it's not hard (I just haven't had time).