I want to achieve smooth edges on an image while using transform: matrix3d() with as much cross browser support as possible.
This issue was occuring for me in Firefox too until I used filter: blur(1px);
I have tried the following CSS with the respective browser layout engines e.g. -webkit and -moz:
backface-visibility: hidden;filter: blur(1px);outline: 1px solid transparent;will-change: transform;background-clip: content-box;
Snippet/HTML & CSS:
.bg {
background-image: url('https://images.unsplash.com/photo-1506782081254-09bcfd996fd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=500&q=60');
background-size: contain;
background-repeat: no-repeat;
height: 200px;
width: 100%;
display: block;
}
.target {
position: absolute;
display: block;
transform-origin: 50% 50%;
transform: translate(20%, 40%) rotate(0deg) matrix3d(0.331247, -0.014293, 0, 0.000104105, -0.0553603, 0.646191, 0, 0.0000782059, 0, 0, 1, 0, -119.275, -29.721, 0, 1);
-webkit-transform: translate(20%, 40%) rotate(0deg) matrix3d(0.331247, -0.014293, 0, 0.000104105, -0.0553603, 0.646191, 0, 0.0000782059, 0, 0, 1, 0, -119.275, -29.721, 0, 1);
-moz-transform: translate(20%, 40%) rotate(0deg) matrix3d(0.331247, -0.014293, 0, 0.000104105, -0.0553603, 0.646191, 0, 0.0000782059, 0, 0, 1, 0, -119.275, -29.721, 0, 1);
-o-transform: translate(20%, 40%) rotate(0deg) matrix3d(0.331247, -0.014293, 0, 0.000104105, -0.0553603, 0.646191, 0, 0.0000782059, 0, 0, 1, 0, -119.275, -29.721, 0, 1);
-ms-transform: translate(20%, 40%) rotate(0deg) matrix3d(0.331247, -0.014293, 0, 0.000104105, -0.0553603, 0.646191, 0, 0.0000782059, 0, 0, 1, 0, -119.275, -29.721, 0, 1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
outline: 1px solid transparent;
will-change: transform;
-webkit-background-clip: content-box;
background-clip: content-box;
}<div class="bg">
<img src="https://i.ibb.co/6w6Fww9/ps-standard.png" class="target">
</div>Firefox Example:
Chrome Example:
