Some permission icons have jagged edges or are blurry and show differently on Firefox vs Edge

[FatOrangutan]

Describe the problem and steps to reproduce it:

Visit https://addons-dev.allizom.org/en-US/firefox/addon/all-of-the-permissions2/ in vanilla Firefox Nightly and in Edge.

What happened?

Click for uncompressed screenshot Edit: alternative link Most icons, especially those for 'clear recent history,' 'read the text,' 'access browsing history,' have jagged edges on Firefox but look fine on Edge. Some other icons e.g. those for 'clipboard,' 'download,' 'access tabs,' 'store data' etc. are blurry on Edge.

Anything else we should know?

The svg code for the (i) icon in use is: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <path id="info-a" d="M12,1.5 C17.7989899,1.5 22.5,6.20101013 22.5,12 C22.5,17.7989899 17.7989899,22.5 12,22.5 C6.20101013,22.5 1.5,17.7989899 1.5,12 C1.5,6.20101013 6.20101013,1.5 12,1.5 Z M12,6 C12.8284271,6 13.5,6.67157288 13.5,7.5 C13.5,8.32842712 12.8284271,9 12,9 C11.1715729,9 10.5,8.32842712 10.5,7.5 C10.5,6.67157288 11.1715729,6 12,6 Z M12,10.5 C12.8284271,10.5 13.5,11.1715729 13.5,12 L13.5,16.5 C13.5,17.3284271 12.8284271,18 12,18 C11.1715729,18 10.5,17.3284271 10.5,16.5 L10.5,12 C10.5,11.1715729 11.1715729,10.5 12,10.5 Z"/> </defs> <g fill="none" fill-rule="evenodd"> <rect/> <mask id="info-b" fill="#fff"> <use xlink:href="#info-a"/> </mask> <use fill="#000" xlink:href="#info-a"/> <g fill="#0C0C0D" fill-opacity=".8" mask="url(#info-b)"> <rect width="24" height="24"/> </g> </g> </svg>

If I take that very same path and reuse it as: `

`

it looks much smoother in Firefox: uncompressed screenshot. I don't know why though. Edit: alternative link.

PS: there are easy savings through SVGO e.g. above becomes simpler: `

`

Edit: added alternative links to screenshots as cubeupload appears to be down.

[FatOrangutan]

Edit: Split off into https://github.com/mozilla/addons/issues/11606

[muffinresearch]

@FatOrangutan please file another issue if you have an additional separate bug to report on the same feature.

[muffinresearch]

@bobsilverberg this appears to be the same thing as https://github.com/mozilla/addons/issues/11525 I suspect the mask is the issue again.

[tsl143]

@FatOrangutan /@muffinresearch can anyone please reconfirm if this still exist, probably this was fixed alongwith by mozilla/addons-frontend#4691

[FatOrangutan]

I can confirm that the issue still exists. The issue is likely in the svg's themselves.

[bobsilverberg]

I "fixed" this in issue mozilla/addons#11525 for the storage icon by replacing the one in the repo with a new one I exported from Sketch. I suppose we could do the same with all of the other icons which may address this issue. @pwalm do you have any suggestions/opinions on what's discussed above about the svg files?

[FatOrangutan]

I "fixed" this in issue mozilla/addons#11525 for the storage icon by replacing the one in the repo with a new one I exported from Sketch

While that did improve the situation, it looks like it didn't completely fix it:

This is the original storage icon, except with all width and height attributes multiplied by 10, just to make the comparison easier: <svg width="180px" height="200px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <path d="M19.5,15.825 L4.5,15.825 C3.675,15.825 3,16.5 3,17.325 L3,20.25 C3,21.075 3.675,21.75 4.5,21.75 L19.5,21.75 C20.325,21.75 21,21.075 21,20.25 L21,17.325 C21,16.5 20.325,15.825 19.5,15.825 Z M18.075,20.25 C17.25,20.25 16.575,19.575 16.575,18.75 C16.575,17.925 17.25,17.25 18.075,17.25 C18.9,17.25 19.575,17.925 19.575,18.75 C19.575,19.575 18.9,20.25 18.075,20.25 Z M18.75,2.25 L5.25,2.25 C3.975,2.25 3,3.3 3,4.65 L3,14.625 C3.45,14.4 3.975,14.25 4.5,14.25 L19.5,14.25 C20.025,14.25 20.55,14.4 21,14.625 L21,4.65 C21,3.3 20.025,2.25 18.75,2.25 Z" id="path-1"/> </defs> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="storage" transform="translate(-3.000000, -2.000000)"> <g id="Icon-/-32-/-Storage---32"> <rect id="bouding-box" x="0" y="0" width="240" height="240"/> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"/> </mask> <g id="Shape" fill-rule="nonzero"/> <g id="Icon-Color" mask="url(#mask-2)" fill="#0F1126"> <rect id="Rectangle" x="0" y="0" width="240" height="240"/> </g> </g> </g> </g> </svg>

I then reuse this very same path as: <svg xmlns="http://www.w3.org/2000/svg" width="180" height="200" viewBox="3 2 18 20"> <path fill="#0F1126" fill-rule="evenodd" d="M19.5,15.825 L4.5,15.825 C3.675,15.825 3,16.5 3,17.325 L3,20.25 C3,21.075 3.675,21.75 4.5,21.75 L19.5,21.75 C20.325,21.75 21,21.075 21,20.25 L21,17.325 C21,16.5 20.325,15.825 19.5,15.825 Z M18.075,20.25 C17.25,20.25 16.575,19.575 16.575,18.75 C16.575,17.925 17.25,17.25 18.075,17.25 C18.9,17.25 19.575,17.925 19.575,18.75 C19.575,19.575 18.9,20.25 18.075,20.25 Z M18.75,2.25 L5.25,2.25 C3.975,2.25 3,3.3 3,4.65 L3,14.625 C3.45,14.4 3.975,14.25 4.5,14.25 L19.5,14.25 C20.025,14.25 20.55,14.4 21,14.625 L21,4.65 C21,3.3 20.025,2.25 18.75,2.25 Z"/> </svg>

And it looks smoother - see before / after uncompressed screenshot: cubeupload / lensdump. Notice the edges of the hollow circle and all the other curved parts. Granted this is not as noticeable as in the other icons, but I believe all these icons have the same underlying issue, which merely re-exporting might not fix.

[bobsilverberg]

@pwalm I know I already pinged you on this, but based on the comment above it seems there is an issue with the svg's and one that apparently cannot be fixed by simply re-exporting them from Sketch. Is this something you can look into and possibly fix?

[pwalm]

Straight from the library file. Hope this one works! Storage - 32.svg.zip

[bobsilverberg]

@FatOrangutan Do you mind trying the attached svg and letting us know if it seems to address the issue you were seeing with the previous versions.

[FatOrangutan]

This unfortunately has the same issue. If I take the path from this svg and reuse it without relying on a mask, then much like the previous two comparisons, it looks smoother: before / after: https://i.cubeupload.com/EhziuE.png.

FWIW, the 'smooth svg' is: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="26" viewBox="4 3 24 26"> <path fill="#0C0C0D" fill-rule="evenodd" fill-opacity=".8" d="M26,21.1 L6,21.1 C4.9,21.1 4,22 4,23.1 L4,27 C4,28.1 4.9,29 6,29 L26,29 C27.1,29 28,28.1 28,27 L28,23.1 C28,22 27.1,21.1 26,21.1 Z M24.1,27 C23,27 22.1,26.1 22.1,25 C22.1,23.9 23,23 24.1,23 C25.2,23 26.1,23.9 26.1,25 C26.1,26.1 25.2,27 24.1,27 Z M25,3 L7,3 C5.3,3 4,4.4 4,6.2 L4,19.5 C4.6,19.2 5.3,19 6,19 L26,19 C26.7,19 27.4,19.2 28,19.5 L28,6.2 C28,4.4 26.7,3 25,3 Z"/> </svg>

[pwalm]

[Oops, didn't mean to close the issue lol]

Forgive my ignorance, but what is the issue here: Is it a rendering problem in the browser, or do these icons need to adjusted/redesigned/re-exported?

[FatOrangutan]

Forgive my ignorance, but what is the issue here: Is it a rendering problem in the browser, or do these icons need to adjusted/redesigned/re-exported?

I don't know, but a specific 'readjustment' on the svg's seems to fix the issue for me.

See this screenshot for the rough edges issue - especially noticeable on the i-inside-circle, lens and the clock icons in the Firefox window.

I've found that if I create an svg using the exact same path from the svg's currently in use, but avoid the mask, they turn out to be smooth e.g. screenshot. In this screenshot, the jagged svg is the one currently used on the addons.mozilla.org site, and its svg code is: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <path id="info-a" d="M12,1.5 C17.7989899,1.5 22.5,6.20101013 22.5,12 C22.5,17.7989899 17.7989899,22.5 12,22.5 C6.20101013,22.5 1.5,17.7989899 1.5,12 C1.5,6.20101013 6.20101013,1.5 12,1.5 Z M12,6 C12.8284271,6 13.5,6.67157288 13.5,7.5 C13.5,8.32842712 12.8284271,9 12,9 C11.1715729,9 10.5,8.32842712 10.5,7.5 C10.5,6.67157288 11.1715729,6 12,6 Z M12,10.5 C12.8284271,10.5 13.5,11.1715729 13.5,12 L13.5,16.5 C13.5,17.3284271 12.8284271,18 12,18 C11.1715729,18 10.5,17.3284271 10.5,16.5 L10.5,12 C10.5,11.1715729 11.1715729,10.5 12,10.5 Z"/> </defs> <g fill="none" fill-rule="evenodd"> <rect/> <mask id="info-b" fill="#fff"> <use xlink:href="#info-a"/> </mask> <use fill="#000" xlink:href="#info-a"/> <g fill="#0C0C0D" fill-opacity=".8" mask="url(#info-b)"> <rect width="24" height="24"/> </g> </g> </svg> I create the smooth svg by taking the same path description attribute but avoiding the use of a mask. So basically: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="#0F1126" fill-rule="evenodd" d="M12,1.5 C17.7989899,1.5 22.5,6.20101013 22.5,12 C22.5,17.7989899 17.7989899,22.5 12,22.5 C6.20101013,22.5 1.5,17.7989899 1.5,12 C1.5,6.20101013 6.20101013,1.5 12,1.5 Z M12,6 C12.8284271,6 13.5,6.67157288 13.5,7.5 C13.5,8.32842712 12.8284271,9 12,9 C11.1715729,9 10.5,8.32842712 10.5,7.5 C10.5,6.67157288 11.1715729,6 12,6 Z M12,10.5 C12.8284271,10.5 13.5,11.1715729 13.5,12 L13.5,16.5 C13.5,17.3284271 12.8284271,18 12,18 C11.1715729,18 10.5,17.3284271 10.5,16.5 L10.5,12 C10.5,11.1715729 11.1715729,10.5 12,10.5 Z"/> </svg>

[FatOrangutan]

Appears to have been fixed in Nightly with Bug 1448667. Closing.

[bobsilverberg]

Nice to see this has been fixed in Firefox. Thanks for updating and closing the issue, @FatOrangutan.

[ioanarusiczki]

I verified this on AMO dev with Microsoft Edge, Chrome and Firefox 59 with Win10 desktop - full screen. Perhaps the FF displays them with jagged edges (seems like anti aliasing is not applied) compared to the other two browsers, an example for this should be the Exchange messages with programs other than Firefox icon. On Chrome and Edge -> Access your location and Access browsing history are a little bit blurry but hardly noticeable. FF59 Chrome Edge