search

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.57k stars 1.64k forks source link

fix: fix borders bugs on chrome without breaking in firefox #319

Closed guastallaigor closed 5 years ago

guastallaigor commented 5 years ago

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.

virtuoushub commented 5 years ago

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

Android Chrome

androidchrome

Safari

safari

Firefox

firefox

guastallaigor commented 5 years ago

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

virtuoushub commented 5 years ago

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)

0

zoomed way in (has weird spikey effect)

1 2 3

guastallaigor commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

:tada: This PR is included in version 2.1.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: