mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается. 
function render(arr) {
return `<a data-num="${arr.id}" data-category="${arr.category}" class="products__card card">
<div class="card__image image">
<img src="${arr.image}" alt="${arr.image}">
</div>
<h3 class="card__title title">${arr.name}</h3>
<p class="card__desc">${arr.description}</p>
<div class="card__bottom">
<p class="card__price">${arr.price} р.</p>
<button class="card__buy">
<img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">
</button>
</div>
</a>`;
}
function loadCakes(data, count = null) {
return data
.slice(0, count ?? data.length)
.reduce((carry, item) => carry + render(item), '');
}
function loadItems() {
$.getJSON('database/products.json', function (data) {
$('#cakes-cards').html(loadCakes(data));
$('#index-cards').html(loadCakes(data, 6));
});
}$(function() {
loadItems();
});
function loadItems() {
$.getJSON('database/products.json', function(data) {
function loadCakes(num) {
let out = '';
for (let i = 0; i < (num || data.length); i++) {
out += '<a data-num="' + data[i].id + '" data-category="' + data[i]['category'] + '" class="products__card card">';
out += '<div class="card__image image">';
out += '<img src="' + data[i].image + '" alt="' + data[i]['image'] + '">';
out += '</div>';
out += '<h3 class="card__title title">' + data[i]['name'] + '</h3>';
out += '<p class="card__desc">' + data[i]['description'] + '</p>';
out += '<div class="card__bottom">';
out += '<p class="card__price">' + data[i].price + ' р.</p>';
out += '<button class="card__buy">';
out += '<img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">';
out += '</button>';
out += '</div>';
out += '</a>';
}
return out;
}
$('#cakes-cards').html(loadCakes());
$('#index-cards').html(loadCakes(6));
})
}
.burger-active {
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
