Nes.css: Radios has stray pixels in Firefox

[Polygonalr]

Stray pixels appear when Radio cursor is blinking.

Does not appear in Google Chrome, the pixels appear in Firefox 63.0.3, even with different zoom levels.
Might just be a Firefox bug.

[BcRikko]

Thanks.

I see... but, I don't know how to resolve the problem. 😭
Please help me 🙏

Chrome70: zoom to 110%

[myfonj]

I tried to fix it by making the "shadowing" boxes bordered (because borders are usually better aligned to physical pixel grid than anything other) plus slightly oversizing them, but even that didn't work much better in all zoom scenarios.

I think that best what could be done would be resorting to background-image (or content), either rendered PNG or SVG. I suppose that resulting datauris would be overall even shorter than current shadow expressions.

[alexgleason]

I know how to fix this, sending a PR shortly.

EDIT: My mistake, see below.

[alexgleason]

Wait are you talking about the white lines or the dots between the choices? My PR is for the dots between the choices, whoops.

EDIT: Wow, using box-shadow to draw these sprites is a really clever way to do it.

[ernestomancebo]

hi @BcRikko & @Polygonalr, please take a look into my PR; somehow firefox separates the boxes and needs spread-radius to be specified.

[BcRikko]

@ernestomancebo Thanks 🙇
I merged #45 👍

[ernestomancebo]

Any time @BcRikko. I'll be rambling among the issues of this repo, I really like this project.

[myfonj]

Glad to see this resolved :]

I think that change from last PR could be simplified: spread introduced in shadows could be added to base dimensions of shadowed square, so that original
…::before{ width: 2px; height: 2px; top: -2px; left: -2px; /* box shadow with .32px spread */}
becomes
…::before{ width: 2.64px; height: 2.64px; top: -2.32px; left: -2.32px; /* box shadow without spread, so ommitable */}
(BTW, why was that spread expressed in ems?)

Related: I've compared several alternative methods of embedding such content in CSS, focusing on data size ( https://codepen.io/myf/pen/EOGBLY/?editors=0100 ) and so far it seems that what is currently done in ~3772 bytes of box-shadow (what could be ~2211 b after aforementioned adjustment) could be as well done in ~506 b SVG dataURI or ~347 b PNG dataURI.

[ernestomancebo]

@myfonj did you tried that on google chrome or safari? increasing the box shadow size works on FF, but not in the others.

[Polygonalr]

Whoops, I apologise for the lack of updates and not elaborating about the issue better.

I've checked the updated project, and I am glad the radio arrow is fixed in Firefox. However, the stray pixels I was referring to in the original issue is highlighted in the screenshot below:

Note that this only happens when the cursor is translucent and blinking (click on Yes/No once).

Double Edit:

44 fixes this

[BcRikko]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: