postcss-safari-border-plugin

PostCSS plugin to solve problem when using border-radius + overflow: hidden + transform

Usage no npm install needed!

<script type="module">
  import postcssSafariBorderPlugin from 'https://cdn.skypack.dev/postcss-safari-border-plugin';
</script>

README

PostCSS Safari Border Plugin Build Status

PostCSS plugin to solve problem when using border-radius + overflow: hidden + transform.

for more info, please visit https://bugs.webkit.org/show_bug.cgi?id=98538

also, here is a gist

What it does

.foo {
    overflow: hidden;
    border-radius: 10px;
}

.foo {
    overflow: hidden;
    border-radius: 10px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

Usage

postcss([require("postcss-safari-border-plugin")]);

See PostCSS docs for examples for your environment.