1395025 - Extension popup windows with vertically-scrolling content are too narrow

Status: UNCONFIRMED

(WebExtensions :: Frontend, defect, P5)

Description

[Paul Marks]

Attachment: popup_firefox_vs_chrome.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170825011442

Steps to reproduce:

My Chrome extension (IPvFoo) provides a popup window (chrome.pageAction.setPopup()) that lists all the domains associated with a website; this content often needs to scroll vertically.

1. Install https://addons.mozilla.org/en-US/firefox/addon/ipvfoo-pmarks/
2. Visit a site that makes requests to a lot of domains (e.g. reddit.com)
3. Click IPvFoo's icon to display the popup.


Actual results:

On Firefox, the popup appears with a vertical scrollbar (good), but also a horizontal scrollbar (bad).  On Chrome, the vertical scrollbar causes the popup itself to widen, so that no horizontal scrollbar is required.

I've attached a screenshot to highlight the problem.

Comment 1

[Vitaly Zdanevich]

The same problem with my extension https://intelligent-speaker.com/

Comment 2

[Andrew Duthie]

This one is pretty easy to reproduce. If a popup has a fixed width and enough height, horizontal scroll occurs unexpectedly.

See: https://gist.github.com/aduth/e13ebbdaae8b96972a1909b5301dc35b

Download ZIP and "Load Temporary Extension".

Comment 3

[Jeff]

This bug still actual

Comment 4

[Paul Marks]

6 years later, I decided to call this hacky function after each content update. I still see a lot of momentary scrollbar glitching, but it seems to settle on the correct state:

// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1395025
let redrawn = false;
function scrollbarHack() {
  if (typeof browser == "undefined") {
    return;  // nothing to do on Chrome.
  }
  setTimeout(() => {
    const e = document.documentElement;
    if (e.scrollHeight > e.clientHeight) {
      document.body.style.paddingRight = '20px';
    } else if (!redrawn) {
      document.body.classList.toggle('force-redraw');
      redrawn = true;
    }
  }, 200);
}