使用变换时对象拟合无法正常工作：缩放

有产品卡（它们看起来像产品卡）。图片，然后是标题和描述。

<section class="projects__section c-container--center-max">
    <h2 class="visually-hidden">Список проектов</h2>
    <ul class="projects__list">
        <li class="projects__item">
            <a href="#">
            <div class="card">
                <picture>
                    <source srcset="img/projects__movie-1@orig-plus.jpg 1000w" media="(min-width: 750px)"/>
                    <source srcset="img/projects__movie-1@900.jpg 900w" media="(max-width: 750px)"/>
                    <img class="card__img" src="img/projects__movie-1@orig-plus.jpg" alt="Movie 1"/>
                </picture>
                <div class="w-card__text">
                    <h3 class="card__title">The Movie</h3>
                    <p class="card__description">Movie in cinema</p>
                </div>
            </div>
            </a>
        </li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
    </ul>
</section>

:root {
    --max-width: 1280px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.c-container--center-max {
    margin: 0 auto;
    max-width: var(--max-width);
}
.projects__section {
    padding: 30px 0px;
}
.projects__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, auto));
    gap: 1rem;
    align-items: stretch;
    list-style: none;
}
.projects__item {
    --transition-time: 0.3s;
    display: grid;
    align-items: stretch;

    box-shadow: 0 0 20px rgb(142 78 199 / 20%);
    border-radius: 5px;
    
    transition: var(--transition-time) ease;
}
.card {
    display: grid;
    grid-template-rows: minmax(450px,75%) repeat(2, auto);
    grid-template-areas:
    'card__img'
    'w-card__text';

    background-color: #fff;
    transition: var(--transition-time) ease;
    overflow: hidden;
}
.card__img {
    width: 100%;
    grid-area: card__img;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    display: block;
    transition: var(--transition-time) ease;
    transform: scale(1);
}
.w-card__text {
    grid-area: w-card__text;
    padding: 20px;
}
.projects__item .card {
    height: 100%;
}
.card:hover .card__img{
    transform: scale(1.01);
    filter: brightness(75%);
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
}

这些卡片在一个带有属性的网格容器中grid-template-columns: repeat(auto-fill, minmax(300px, auto))，它们分别被拉伸、压缩和根据屏幕改变一行中的数字。为了使图片适合块，我object-fit: cover; overflow: hidden还应用了图片width: 100%。一切正常，但是：当您悬停时，图片应该略微平滑地增加（当您移除悬停时，采用原始大小）。应用transform: scale(1.01); transition: 0.3s. 而现在的问题是：当悬停被移除时，图片恢复到原来的状态，然而，在随机情况下，在变换结束时，它会抽搐，好像重新对齐以适应块。在什么模式我无法追踪。即使它们具有相同的宽度/高度/文本部分，彼此相邻的相同图片的行为也会有所不同。例如，连续 3 张相同的图片（一排卡片），一张向下抽动，另一张向上和向左抽动，第三张根本不抽动。我知道 object-fit 不会动画，但有些图片不会抽搐，这意味着属性“可能”正常工作。这种行为可能是什么原因以及如何正确实施它？甚至在 JS 上也是可能的。提前致谢。