Radios has stray pixels in Firefox about nes.css HOT 11 CLOSED

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

from nes.css.

@ernestomancebo Thanks 🙇
I merged #45 👍

from nes.css.

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

from nes.css.

Thanks.

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

Chrome70: zoom to 110%

from nes.css.

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.

from nes.css.

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

EDIT: My mistake, see below.

from nes.css.

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.

from nes.css.

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.

from nes.css.

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

from nes.css.

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

from nes.css.

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

from nes.css.