Bug: Borders in Firefox have "slices"

guastallaigor commented 5 years ago

Describe the bug refs #250 This a different bug than it was before. It's hard to explain but in a different resolutions/components the borders has some slices on it.

To Reproduce Open Firefox in the docs (index.html) or storybooks and check the borders of all the components.

Expected behavior The borders are normal just like Chrome.

Screenshots

Environment:

OS: Ubuntu 16.04
Browser: Firefox Developer Edition 65.0b11 (64-bit) / Firefox Quantum 64.0 (64-bit) (test it on both)
Build environment Node v10.15.0

Suggestion(s) for fixing this issue It has something to do with border-image, but I'm not sure how to fix this yet.

Additional context

Happening only on Firefox;
The buttons that I put inside the docs in #272, they all have this bug. Also the "Copied!" Balloon has this bug as well.

michaldaniel commented 5 years ago

Seems like a result of property.

border-image-repeat: space;

The effect goes away on firefox with a change to.

border-image-repeat: repeat;

I'm not sure how helpful info that is. I came here a bit at random and started playing with inspector for a short while.

Definition of border-image-repeat: space; says:

The image is repeated (tiled) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

So this is what happens here, since image is defined as 5x5, for example on my Firefox 65.0 1920x1080 window dimensions of selector wiget affected by the issue end up as 387 × 42 (unbordered) so the extra 2 pixels get spread around tiles.

Other browsers most likely forgo displaying those spaces since 1-4px / number of tiles ends up way below 1px but Firefox must carry that value over since the amount of spaces that show up seems to directly correlate to wiget size over multiple of 5.

BcRikko commented 5 years ago

Thanks for your comment 👍

I changed border-image-repeat: space to repeat. Looks good 🎉

But Chrome's display got weird. it's very difficult... 😱

#	chrome 72	firefox 65
`space`
`repeat`

※ zoom: 110%

BcRikko commented 5 years ago

We might be able to resolve with using the following browser hacks. 🤔

/* only Firefox */
@supports (-moz-appearance: meterbar) {
  .nes-btn {
    border-image-repeat: repeat;
  }
}

guastallaigor commented 5 years ago

Closing this because it is fixed by #301.

nostalgic-css / NES.css

Bug: Borders in Firefox have "slices" #273