1418677 - browserAction popup rendering issue

Status: RESOLVED DUPLICATE of bug 1420865

(WebExtensions :: Frontend, defect, P2)

Description

[Lusito]

Attachment: browserActionGlitch.png

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

In my web-extension, I created a browserAction popup:
https://addons.mozilla.org/de/firefox/addon/dictcc-translation/


Actual results:

The popup showed rendering issues (as seen in the screenshot), the spaces between the input, select and button looked like a previous render was still in memory when re-rendering.

Enter a search text, and some text leftover seems to be behind the search result (as seen in the screenshot).

In the beta version (5.3a) of the add-on, the error is more dominant, as the spaces are shown black, but with the 5.2 version, it still happens, but has leftovers from the buttons, etc.


Expected results:

A clean drawing of the popup.

All of this worked fine in Firefox 56. I noticed the bug in Nightly 57 back then, but thought it was just a Nightly thing.
I've tested it with the latest Nightly (59) and it's still happening.

I've seen this issue on other extensions as well, tho not as dominant.

Comment 1

[Lusito]

This might have to do with no background color being set. Is the background color of the popup always white? I would have thought, that the dark theme would use a different background color, but it seems to be white as well.

Comment 2

[Lusito]

Nope, it's not the background.. I've noticed rendering issues even with a background color set.

Comment 3

[mo]

I can confirm the problem with my AddOn on Windows 7: https://addons.mozilla.org/de/firefox/addon/urls-list/
(When you enter text to the filter Textbox an additional div is shown, by changing display:none to display:block)

It seems, when changes are done in the popup the new "view" is just rendered at top of existing screen buffer.
I can reproduce this with Firefox 57 on Windows 7. Firefox 57 on Ubuntu 16.04 does not show this problem.

Comment 4

[Lusito]

I'm on Windows 7 as well.

Comment 5

[Andy McKay]

This sounds like it might be a duplicate of bug 1380622. Can we also check that APZ zooming is off. That's the setting apz.allow_zooming in about:config.

Comment 6

[Lusito]

apz.allow_zooming is false

extensions.webextensions.remote is true and setting it to false seems to fix the issue (but causes other, more serious issues).

Comment 7

[mo]

Attachment: 1_popup.png

Comment 8

[mo]

Attachment: 2_show_div.png

Comment 9

[mo]

Attachment: 3_hide_div.png

Comment 10

[mo]

I made a minimal plugin reproducing this: https://gist.github.com/moritz-h/39833a9b83d3a07864d3dfab23ceec94
I attached 3 images.
1: shows the popup on opening
2: display a hidden div, note the button "shadow" in the background
3: hide the div again, the layout behaves like the div is not there, but note the "shadow" of the div.
The display errors are permanent, not just a few milliseconds.
apz.allow_zooming is false. (With turning it on the popup of all plugins I have does not open)

Comment 11

[Christophe]

Attachment: Visual glitches

I have the same issue happening with my extension. This is happening on both firefox 57 and on the dev. edition (58).

Comment 12

[camillebarneaud]

The addon Wappalyzer[1] encounters this issue.[2]

[1] https://addons.mozilla.org/fr/firefox/addon/wappalyzer/
[2] https://github.com/AliasIO/Wappalyzer/issues/1937

Comment 13

[Mark Smith [:mcs]]

We encountered this bug with our Page Saver WE extension as well. It seems to only occur on Windows (we tested on Win10, Ubuntu Linux, and macOS). We were able to work around it by using CSS to add a transparent PNG background image to the content that we swap in and out of the browser action popup (in our case, we have 3 div elements that are children of the body but only one is displayed at a time).

Comment 14

[Danny Y]

I've ran into this issue too on Firefox 57.0.4, 58.0b16, and today's nightly on Windows 8.1. The workaround provided by Mark does seem to fix it (setting a background-image to a transparent png).

Comment 15

[ab6.host]

I can reproduce this bug. It occurs only on Windows, and works on Arch Linux and macOS perfectly fine. None of the workarounds seem to work, even those suggested in 1420865, https://bugzilla.mozilla.org/show_bug.cgi?id=1420865.

Comment 16

[dessant]

Here is another way to reproduce the rendering artifacts on Windows:

* Save the files below, load the extension, then open the toolbar popup
* Scroll up and down a couple of times in the popup

The list items should appear duplicated, like on this image: https://i.imgur.com/eHC85Wl.png


manifest.json

{
  "manifest_version": 2,
  "name": "test",
  "version": "0.1.0",

  "browser_action": {
    "default_popup": "popup.html"
  }
}


popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      ul {
        width: 100px;
        height: 200px;
        overflow-y: auto;
      }

      li {
        height: 60px;
        font-size: 14px;
        list-style-type: none;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
      <li>ITEM</li>
    </ul>
  </body>
</html>

Comment 17

[Gabriel Ivanica [:givanica]]

Attachment: layer rendering issues

With so many developers reporting this issue and for so long it's quite sad to see than the bug is still unconfirmed when it's clearly happening. Tried all versions of Firefox, same everywhere, reproducible 100%. And of course I have a similar issue and clearly the popup is at fault because the same errors don't happen if a window is used instead of the popup.
Tested on multiple PCs. Same problem.
So, as of right know, the only way of providing a good interface UI for and addon (because overlays were such a last century model and they had to be removed and replaced with a stupid interface good for nothing that can't even keep the page state) is simply unusable.
The WebExtensions was pushed so much but can't and will never provide replacement for things that are so basic and when they do... (after almost 2 years in development) you have something full of issues that can "render" any user experience to be a nice 0 stars rated.
It it may help:
 - seems that any DOM node with position absolute that is hidden/moved/rendered again elsewhere will trigger the issues (seems that on of the rendering layers is not cleared as it should be)

Comment 18

[camillebarneaud]

Wappalyzer on Firefox + Win is really impacted since several months by this as it is the only way we display information. (and as GIvanica said it is easily reproducible)

If there is anything I can do to help you investigate and fix this bug, please tell me.

Moreover, I think this is a bug of top priority for Firefox as the addons of Firefox are one of its main strengths.

Comment 19

[Anthony Lieuallen]

This affects Greasemonkey: 

https://github.com/greasemonkey/greasemonkey/issues/2816#issuecomment-361015520
https://github.com/greasemonkey/greasemonkey/issues/2833

And I'm attaching a reduced test case which shows the issue, and screenshots of it when just opening, then slightly scrolling the browser action popup.  When scrolling, ghosted second copies of elements that just scrolled out of visibility appear near the bottom of the scrolling area.  Only on Windows as far as I can tell.

Comment 20

[Anthony Lieuallen]

Attachment: Reduced test case demonstrating this bug.

Comment 21

[Anthony Lieuallen]

Attachment: screenshot of reduced case, when first opened

Comment 22

[Anthony Lieuallen]

Attachment: screenshot of reduced case, after scrolling down slightly

Comment 23

[tom.mai78101]

Attachment: GIF.gif

See attached GIF to see the rendering issue in action. Using a mockup site for testing in the browserAction popup.

Comment 24

[tom.mai78101]

Forgot to mention:

In order to reproduce the issue fairly easy, have the browserAction popup render an image that's tall enough (like, 1 inch (40px) on your monitor, zoomed at 100%). Then make the <body> have a set height of at least above 600px, in order to allow scrolling vertically. Finally, just quickly drag the scroll bar up/down really fast.

Comment 25

[camillebarneaud]

Can you check if the issue is gone with the latest Nightly Build ?
The fix for bug 1420865 seems to solve the issue for the Wappalyzer addon.

Comment 26

[Lusito]

It seems to be fixed for me in both Nightly and Stable.. Not sure when this was fixed for me. Both of my add-ons don't seem to have the issue anymore. Maybe it's just dumb luck tho. I'll keep an eye on this. Thanks.

Comment 27

[tom.mai78101]

Attachment: GIF_M05_D10_Y2018.gif

Nope, the issue is still there. But at least it would automatically disappear after 3 seconds.

Comment 28

[Olivier R.]

The issue is still there with Fx 60, but not with Fx 62 (tested on Windows 10).

Comment 29

[Scott Cummins]

I've encountered this issue using Firefox 61.0b4 (64-bit) on Windows 10.

Comment 30

[Scott Cummins]

Attachment: snipaste_20180515_145612.png

Using Firefox 61 beta on Windows 10, I've found this to be happening when I scroll. It's only a few seconds later that it clears up (which doesn't entirely work).

Comment 31

[Anthony Lieuallen]

I have to remember to do this when I have access to a Windows machine to guarantee I'm testing correctly, so I've been very delayed.  But I have seen it in recent release builds.

Comment 32

[Anthony Lieuallen]

And finally checked.  Do see this at 60.0b11 (stale just launched dev edition).  Cannot reproduce what I saw in comment#19 on Firefox 61.0.1 (stable) nor 62.0b8 (updated just now dev edition).

Comment 33

[dessant]

This is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1420865.