kiwix-serve: Search box hidden (to the right of dice) on mobile

[holta]

The search box does not appear (to the right of the dice) when http://iiab.me/kiwix/wikipedia_es_all_maxi_2020-11/A/Mar_Caribe is viewed on mobile, e.g. Android 11 and iPhone X.

After scrolling way down and back up, the search box suddenly appears.

Reason: the search box textfield is hidden off the screen to the right, when first visiting the page.

As a result of large graphic images further down on major pages like this one.

(Likewise when the page is first loading into the browser, the search textfield is very briefly visible, flashing on screen very briefly and then disappearing...)

FYI This is using the latest kiwix-serve 3.1.2-4

[kelson42]

I have tested this URL with and Android10 phones and everything works fine for me. I don't understand either the bug report.

What is needed is:

• A screencast
• What you expect exactly to happen.

[holta]

The search box simply does not appear, using Chrome 87 on Android 11. Until you scroll far off to the right, which a normal user will never realize.

Similar story on iPhone X, running Safari 14.2 (iOS 14.2).

(However the search box does appear on Firefox 84.1.1 on Android 11.)

[holta]

Actually the problem manifests itself in Firefox 84.1.1 too (on mobile) as soon as you click (tap) on Section "División política"

As the root cause (in all 3 browsers) is the 825-pixel wide http://iiab.me/kiwix/wikipedia_es_all_maxi_2020-11/I/m/Caribe_en_blanco.PNG — being displayed at twice the width of all other items on the page.

So as soon as such "double wide" images are rendered by the browser, the search box disappears (off screen, far off to the right).

[holta]

The root cause of the problem can be illustrated using any desktop version of Chrome:

1. Visit http://iiab.me/kiwix/wikipedia_es_all_maxi_2020-11/A/Mar_Caribe
2. F12 (Developer tools)
3. Ctrl-Shift-M (Toggle device tool bar, to use the browser's built-in mobile emulator)
4. You can set the top-left pull-down to "Responsive" or "iPhone X" to see that the content of the page is squashed (squeezed) to the left, except for that one "double wide" image 2/3 of the way down the page (http://iiab.me/kiwix/wikipedia_es_all_maxi_2020-11/I/m/Caribe_en_blanco.PNG) which...prevents the search box from appearing (when you visit this page using Chrome 87 on Android 11 etc).

[kelson42]

This is what I see and this is more or less OK:

[holta]

On Android 11 (mobile phones, latest Chrome browser) you will not see a search box at all.

Unless someone tells you to scroll off the right side of the page.

[kelson42]

Assuming this will be fixed by kiwix/libkiwix#394

[kelson42]

@holta If you could update this ticket we the latest nightly please? It should really be better now.

[holta]

@holta If you could update this ticket we the latest nightly please? It should really be better now.

0. Testing the latest version of the original page on a narrow-screened smartphone now works!

   http://library.kiwix.org/wikipedia_es_all_maxi_2022-09/A/Mar_Caribe

1. QUESTION: Is the reason that the double-wide .PNG image mentioned on this ticket in December 2020 (at the bottom of this page's long section "División política") — which would originally have appeared as...

   http://library.kiwix.org/wikipedia_es_all_maxi_2022-09/I/Caribe_en_blanco.PNG

   ...now appears as a .PNG.webp instead... ?

   http://library.kiwix.org/wikipedia_es_all_maxi_2022-09/I/Caribe_en_blanco.PNG.webp

2. QUESTION: What exact version of kiwix-tools is currently running on https://library.kiwix.org ?

[kelson42]

Great to read the bug is foxed.

Library.kiwix.org usualy runs latest version, for the moment 3.3.0-1.

The exact reason why is fixed is because the topbar is now in an other iframe as the content. Therefore, the content can no have an impact on the topbar.

[veloman-yunkan]

The exact reason why is fixed is because the topbar is now in an other iframe as the content. Therefore, the content can no have an impact on the topbar.

That's incorrect. library.kiwix.org still uses the old implementation of the taskbar. I don't think we have already released the new (iframe-based) taskbar.