User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0
Build ID: 20200928212824

Steps to reproduce (for a clean profile)

1. Use a new profile.
2. Expand the URL bar.

Steps to reproduce (for drastic result)

1. In a new profile, install Tree Style Tab 3.5.27 (latest).
2. Make sure Tree Style Tab sidebar is shown. (Press F1 to toggle it)
3. Load a slow loading site, e.g. https://www.reddit.com/.
   (You can throttle the network speed in the Network Panel)

Actual result

There is a thin black line above the URL bar.

When TST sidebar is present, visual glitches are all over the place. Please refer to the attached video.

Note

Default sidebars (Bookmarks/History) do not exhibit this bug.

Workaround

Disable Webrender.

Here's the screencast for the bug with Tree Style Tab:
https://giant.gfycat.com/CalculatingAmazingAxisdeer.webm

(For some reason I cannot upload the 2MB video to BMO.)

From Mozregression:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e748d899b8dfe7daabb7645920bd601d3dc82cbd&tochange=5c9f0eac6923ff9b1042d4f046ac7b2546cc34e1

The only visual related bug is bug 1667707.

Also CCing the author of Tree Style Tab.

Additional Note

The bug with TST occurs only when a tab is loading. Perhaps it is related to the loading animation in TST sidebar.

(In reply to Fanolian from comment #0)

Steps to reproduce (for a clean profile)

1. Use a new profile.
2. Expand the URL bar.

It seems like the tab has to be on https://www.reddit.com or https://old.reddit.com in order to have the glitch on URL bar.
I tried https://www.wikipedia.org/, https://www.google.com/ but they don't exhibit the bug.

I've confirmed this problem on Nightly 83.0a1 build ID 20200929094055 on Windows 10 1909.

TST's throbber is similar to Firefox's throbber animation but there is a difference.
Firefox's throbber is constructed on a simple SVG image, colored with the color currentColor. This method depends on -moz-context-properties: fill.
https://searchfox.org/mozilla-central/rev/f27594d62e7f1d57626889255ce6a3071d67209f/browser/themes/shared/tabs.inc.css#200

On the other hand, due to the bug 1388193 and the bug 1421329, I cannot use -moz-context-properties: fill on an extension page. So I use a hack to apply arbitrary color to SVG image based animation. TST's throbber is constructed from arbitrary background color and an animating mask-image. This looks to be the reason why this problem appears only on TST's throbber. Indeed, this problem doesn't happen when I deactivate the mask-image hack with TST's option "Debug mode" => unchecking "Activate workaround for the Bug 1388193 and Bug 1421329 tosimulate SVG icons".

Here is a minimum testcase based on the TST case. Flexboxes, multiple masks and z-index looks to be triggers.

I also see glitches in the following places:

• When capturing a profile with the Firefox profiler, there are unexpected dark blue stripes.
• On Matrix the profile icons sometimes flicker between square and circle.

Updated the patch with a fix for the regression in #1667936, pending try is https://treeherder.mozilla.org/#/jobs?repo=try&revision=72347f1f5aa26f9bba45c67f87d91be9842a2e55

Can you confirm that this bug is fixed with latest Nightly? (Fixed by backout in bug 1667707 comment 9 and not reintroduced by merging the fixed patch in bug 1667707 comment 12?)

(In reply to Darkspirit, Servo QA from comment #12)

Can you confirm that this bug is fixed with latest Nightly? (Fixed by backout in bug 1667707 comment 9 and not reintroduced by merging the fixed patch in bug 1667707 comment 12?)

Yes, it is fixed by the backout and haven't been reintroduced since.
Thanks a lot.

Thanks for testing! :)