使用jQuery为Div容器执行动画时出现边框问题的解决咨询

我在使用jQuery为容器执行动画时，容器移动过程中会出现边框（如图所示），找不到解决办法。相关代码如下：

jQuery动画代码 #

$(document).ready(function() {
  $('#startJourneyContainer').click(function() {
        $("#time").animate({color: "white"}, 800);
        $("#containerInside").animate({opacity: '0',left: '-=300px'}, 800);
        $("#containerInsideIniciar").animate({opacity: '1',left: '-=300px',}, 800);
    });
});

.containerInsideIniciar 样式 #

.containerInsideIniciar {
    position: absolute;
    overflow: hidden;
    height: 670px;
    width: 310px;
    border-radius: 50px;
    top: 38px;
    opacity: 0;
    /* left: 0px;  */
    left: 310px;  
    background: rgb(34,190,82);
    background: linear-gradient(187deg, rgba(34,190,82,1) 6%, rgba(33,169,196,1) 24%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 4;
}

.containerInside 样式 #

.containerInside {
    position: absolute;
    overflow: hidden;
    height: 670px;
    width: 310px;
    border-radius: 50px;
    top: 38px;
    left: 0px;
    background-image: linear-gradient(white,#deeefa,#deeefa);
}

解决方法 #

这种动画时出现的边框通常是浏览器渲染动画时的像素对齐偏差或硬件渲染逻辑导致的，试试以下方案：

• 给两个容器添加硬件加速属性，让GPU负责渲染，减少像素偏差：

.containerInside, .containerInsideIniciar {
  transform: translateZ(0);
  backface-visibility: hidden;
}

• 强制消除默认轮廓和可能的隐性边框：

.containerInside, .containerInsideIniciar {
  outline: none;
  border: 1px solid transparent;
}

• 检查容器尺寸是否刚好卡在像素边界，可微调宽高（比如311px或309px），避免渲染时出现缝隙；
• 确保两个容器的top、left定位完全对齐，动画位移数值精确，避免1px级别的偏差；
• 给父容器也添加overflow: hidden;，防止动画过程中容器边缘的溢出像素显示。

内容的提问来源于stack exchange，提问作者ic3d_