Closed guastallaigor closed 5 years ago
I did a quick smoke test with fix-border-bugs-on-chrome and it looks good.
Thank you very much @virtuoushub 👍 By any chance did you also test the browser zoom in and out? Especially in Safari/Android Chrome.
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 %):
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.
@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();
// ...
}
:tada: This PR is included in version 2.1.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
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.