Skip to content

Instantly share code, notes, and snippets.

@MarvinXu

MarvinXu/mask-rendering-issue.html

Last active April 3, 2022 07:25
Show Gist options
  • Save MarvinXu/b33cbe7a541dbaec229eab21e9218147 to your computer and use it in GitHub Desktop.
Save MarvinXu/b33cbe7a541dbaec229eab21e9218147 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome `-webkit-mask` and `scale3d` rendering issue
Raw
mask-rendering-issue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--icon: url("data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 10v12v-12m1-1h-5v2h3v10h-3v2h8v-2h-3V9Z'/%3E%3C/svg%3E");
}
.i-1 {
mask: var(--icon);
mask-size: 100% 100%;
-webkit-mask: var(--icon);
-webkit-mask-size: 100% 100%;
width: 1em;
height: 1em;
background-color: aqua;
}
.bg-1{
background-image: var(--icon);
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
width: 1em;
height: 1em;
}
.box{
width: 30rem;
height: 30rem;
background-color: #ccc;
font-size: 40rem;
}
.my-scale{
transform: scale3d(3, 3, 1)
/* transform: scale(3); */
}
</style>
</head>
<body>
<div class="box">
<div class="i-1 my-scale"></div>
<!-- <div class="bg-1 my-scale"></div> -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment