fix: fix borders bugs on chrome without breaking in firefox

[guastallaigor]

ref #316
close #317

Description
This PR is to fix the border bugs on Chrome again, without breaking the issues in Firefox.

I've tested in my Ubunto 18.04, in Chrome 72.0 64bits and Firefox 65.0.1 64 bits and they are working properly, even with the zoom in and out. Not sure if it's the best implementation...

Compatibility
N/A

Caveats
Please test in Safari before accepting it, and if you can in Android Chrome, because I can't test in either of those at this moment.

[BcRikko]

Sry, I'm late.
I reviewed the code, but I've not confirmed the display. 🙇

[virtuoushub]

I did a quick smoke test with fix-border-bugs-on-chrome and it looks good.

Android Chrome

Safari

Firefox

[guastallaigor]

Thank you very much @virtuoushub 👍
By any chance did you also test the browser zoom in and out?
Especially in Safari/Android Chrome.

[virtuoushub]

I currently only have Android Chrome available to me to . Zooming somewhat works. Noticing some weirdness when zoomed in "a lot" (did not figure out how to get %):

"somewhat" zoomed in (looks good)

zoomed way in (has weird spikey effect)

[guastallaigor]

I would have to say that "weird spikey effect" it's a known bug with border-image that happens only in Chrome, that we haven't been able to fix it yet.
Maybe it's better to open another issue about it.

[BcRikko]

@virtuoushub Thanks for testing. Looks good 👍

@guastallaigor
I'd like to make the code easier to read. 👨‍🎓
What do you think of the following code? 🤔

@mixin border-image-repeat() {
  border-image-repeat: stretch;

  // for chrome
  @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    border-image-repeat: space;
  }

  // for firefox
  @supports (-moz-appearance: meterbar) {
    border-image-repeat: stretch;
  }
}

@mixin rounded-corners($isDark: false) {
  // ...
  border-image-slice: 3;
  border-image-width: 3;
  @include border-image-repeat();
  // ...
}

[BcRikko]

Thanks for changing. 😆

I just commented on 1 row.

[BcRikko]

Thanks 😆
LGTM 🎉

[BcRikko]

🎉 This PR is included in version 2.1.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀