Pie menu not drawing correctly in FF64 since 6.2

[dkwarr87]

My copy of the add-on updated to 6.2 today and I noticed that it isn't drawing correctly. It now looks like this when activated

I've got quite a few userChrome changes which could be affecting it, but it was working fine before it updated today.

Steps to Reproduce: Activate pie menu

Expected Result: Pie menu should be drawn as a circle

Actual Result: Pie menu is drawn as a shark fin

System Info: Firefox 64.0.2 (64-bit) Windows 7 easyGestures N 6.2 (Updated 4th February 2019)

[ngdeleito]

I cannot reproduce this issue on Firefox 64.0.2 on macOS, unfortunately. Everything looks fine there.

I guess the problem is related to the values of the CSS properties defining the size and position of the image for the pie menu background. Could you inspect the CSS rules that apply to the div element with id "easyGesturesActionsNode:main" and check that none of your changes is affecting the display of that element? Could it be that you also have a CSS variable named --scale-factor that would be interfering?

[dkwarr87]

Yeah, so when I opened this issue it was happening on every page, now it only seems to be happening on some pages and it's not consistent. For example, it occurs on this page but not this page

I've compared the CSS between a working page and a non-working page and I don't see any differences, but I'm not really sure what I'm looking for Working:

display: block;
width: calc(-2 * var(--actions-node-offset)); (computed value: 122px)
height: calc(-2 * var(--actions-node-offset)); (computed value: 122px);
mask-image: url("menu.svg");
mask-position: calc(2 * var(--actions-node-offset)) 0px; (computed value: 0% 0%)
mask-size: calc(-2 * var(--actions-node-offset) * 3); (computed value: 366px auto)
background-color: var(--pie-menu-border-color);
content: "";

Not Working:

display: block;
width: calc(-2 * var(--actions-node-offset)); (computed value: 122px)
height: calc(-2 * var(--actions-node-offset)); (computed value: 122px)
mask-image: url("menu.svg");
mask-position: calc(2 * var(--actions-node-offset)) 0px; (computed value: 0% 0%)
mask-size: calc(-2 * var(--actions-node-offset) * 3); (computed value: 366px auto)
background-color: var(--pie-menu-border-color);
content: "";

For both pages --actions-node-offset is showing as calc(-61px * var(--scale-factor)) and --scale-factor = 1

[ngdeleito]

Thanks for the detailed information. Everything looks correct. Unfortunately, I still cannot reproduce the problem on my side; the pie menu is correctly displayed on the two pages you provide.

I don't know where the problem could be. Could you hover over the "menu.svg" within the mask-image properties and check that the image displayed in the popup is the right one (I guess it will be, but I have no other ideas at this moment)?

[dkwarr87]

I meant to update this a few days ago, but it seems after having restarted everything, it's all working properly again. I will close this issue.

[ngdeleito]

Happy to read that the problem got solved after restarting everything. The WebExtensions API does not allow (yet in Firefox) to cleanly disable an extension (e.g. upon upgrading), so sometimes a restart helps, indeed.