www.inoreader.com - The page shrinks too much when using zoom out gesture

[bui-lang]

URL: https://www.inoreader.com/all_articles

Browser / Version: Firefox Mobile 99.0a1 Operating System: Android 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: The pinch in (zoom out) gesture Steps to Reproduce:

1. Go to https://www.inoreader.com/
2. Sign in with an account.
3. At the page https://www.inoreader.com/all_articles
4. Pinch-in gesture causes the page to shrink.
   View the screenshot

   

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20220215092702
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. Zooming out the page shrinks too much, compared to Chrome.

Note: The issue is not reproducible on Chrome.

Tested with: Browser / Version: Firefox Nightly 99.0a1 (🦎 99.0a1-20220216094238), Firefox Release 97.1.0 (🦎 97.0-20220131171509) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)

Moving to Needsdiagnosis for further investigation.

[qa_07/2022]

[karlcow]

I'm not sure to understand what the issue is about. The site allows zooming in and zooming out this is quite cool. no?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The piece of code which creates this "feature"

<div id="jumper_div" style="top:-1000px;">
  <div id="jumper_filter">
    <input type="text" id="jumper_input" autocorrect="on" name="jumper_ac_62134497b2852" autocomplete="off" tabindex="-1">
    <div class="jumper_loupe_icon">
      <span class="icon16 icon-loupe_small icon_gray"></span>
    </div>
  </div>
  <div id="jumper_table"></div>
  <div id="jumper_div_bottom"> Press <span class="hotkey">.</span> to open Quick Access at any time. </div>
</div>

There is an easy fix.

/* base.css | https://www.inoreader.com/css/base.css?v=13.2&ts=1645426226 */

#jumper_div {
  right: 0;
}

[webcompat-bot]

Generate outreach template

[karlcow]

The application is developed by innologica Maybe @nkostadinov can help us find the right person who could fix the css, so Firefox users have the same behavior than Chrome users on mobile.

[bui-lang]

I'm not sure to understand what the issue is about.

@karlcow To understand the issue, now you just need to use the swipe left gesture [←] on the page.

Screenshot 1


If using add-on Translate this page , we have to swipe up (scroll down) to see the bottom popup bar of the add-on.

Screenshot 2


[furuycom]

The issue still exist.

https://github.com/webcompat/web-bugs/assets/81188796/f5214d35-7c86-43b4-a91b-1e179734009f

[KristhianX]

I'm using an userscript with the following code to fix this problem:

window.addEventListener('load', function() {
  document.body.style = 'position: fixed; height: 100vh; width: 100vw';
});

Is important to apply the code to

*://*.inoreader.com/* 

to make sure the userscript is executed. Tested with Violentmonkey.

There are several websites with similar problems. Sadly I don't see an universal solution that can be applied to all of them. Some require a different position or overflow settings.

Hope the developers fix this.

EDIT: The fix is now available as an add-on: https://addons.mozilla.org/en-US/android/addon/inoreader-mobile-fix/