1815561 - Browser action icon can't understand style="vector-effect: non-scaling-stroke;"

Status: RESOLVED INVALID

(WebExtensions :: General, defect)

Description

[gayali.rohit]

Attachment: Testing_Package.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0

Steps to reproduce:

I created an SVG icon that used style="vector-effect: non-scaling-stroke;" and used it in the browser action icon and a context menu icon.

Actual results:

The stroke of the icon is improperly scaed

Expected results:

The icon's stroke should have appeared like normally. When you open the SVG picture using Firefox, it looks normal. In the toolbar, it appears to be disformed.

Seemed to be a general problem 10 years ago

The zip file is a file to be loaded as a temporary add-on to see the problem

Comment 1

[Robert Longson [:longsonr]]

Maybe you could attach screenshots of how it looks on Firefox and Chrome.

You don't have any patterns in your icon so it can't be bug 858317

Comment 2

[gayali.rohit]

Attachment: Difference in the SVG: with vector-effect: non-scaling-stroke; on right and without that style on left

Added a screenshot of the SVG icon.
The icon with style="vector-effect: non-scaling-stroke;" is the icon on the right, and the icon without that style is on the left.

Comment 3

[Robert Longson [:longsonr]]

OK, what does it look like on Chrome?

Comment 4

[Alex Cornestean]

Hello,

I reproduced the issue on the latest Nightly (111.0a1/20230209041032), Beta (110.0/20230206190557) and Release (109.0.1/20230127170202) under Windows 10 x64 and macOS 11.3.1.

On Windows, the icon’s stroke appears more pronounced than on macOS, though both OSes manifest this issue nevertheless.

Comment 5

[Alex Cornestean]

Attachment: 2023-02-09_14h43_05-Windows.png

Comment 6

[Alex Cornestean]

Attachment: Screen Shot 2023-02-09 at 14.48.38 - macOS.png

Comment 7

[Robert Longson [:longsonr]]

Alex, you mean it looks different to Chrome's rendering of this icon? Assuming Chrome renders it at the same size as Firefox. If so would you mind attaching a screenshot of that so we can compare.

The effect is a non-scaling stroke so if the icon is displayed quite small then the stroke will seem quite large because it won't be scaled down. I'm not convinced there is any bug here.

Comment 8

[gayali.rohit]

(In reply to Robert Longson [:longsonr] from comment #3)

OK, what does it look like on Chrome?

Chrome does not support SVG icons

Comment 9

[gayali.rohit]

(In reply to Robert Longson [:longsonr] from comment #7)

Alex, you mean it looks different to Chrome's rendering of this icon? Assuming Chrome renders it at the same size as Firefox. If so would you mind attaching a screenshot of that so we can compare.

The effect is a non-scaling stroke so if the icon is displayed quite small then the stroke will seem quite large because it won't be scaled down. I'm not convinced there is any bug here.

I must have misunderstood non-scaling-stroke. My assumption was that the stroke would still be scaled down during render time.

Comment 10

[Alex Cornestean]

Hello Robert,

I loaded the extension in Chrome and it appears Comment 8 is correct. Chrome does not support SVG icons so the extension icon displayed on the toolbar is the default puzzle icon.

See the attached screenshot.

Comment 11

[Alex Cornestean]

Attachment: 2023-02-10_08h49_59.png