Html CSS使用translate设置动画会导致不必要的像素偏移

尝试创建四个部分相交的动画以创建一个圆。然而，当最后一部分开始移动时，会出现一个奇怪的像素偏移

尝试使用padding bottom作为属性，得到了相同的结果

这是小提琴

html{字体大小：10px！重要；}
身体{
最小宽度：350px；
}
.Overlay{display:block}
div[class^=“Popup”]{
宽度：0；
身高：0；
左边框：15.625rem实心透明；
右边框：15.625rem实心透明；
边框底部：15.625rem纯黑色；
边框左下半径：15.625雷姆；
边框右下半径：15.625雷姆；
变换原点：顶部；
位置：绝对位置；
最高：50%；
显示：块
}
.Circle容器{}
.圆形容器内部{位置：相对；宽度：31.25rem；高度：31.25rem；左侧：50%；
-webkit转换：翻译（-50%，0%）；
-moz变换：平移（-50%，0%）；
-ms转换：翻译（-50%，0%）；
-o变换：平移（-50%，0%）；
转换：转换（-50%，0%）；
显示：内联块；
}
.MW ContentWrapper.Popup1{边框底部：15.625rem纯黑色；变换：旋转（90度）平移（-200%，0）；}
.MW ContentWrapper.Popup2{边框底部：15.625rem纯红；变换：旋转（180度）平移（0200%）；}
.MW ContentWrapper.Popup3{边框底部：15.625rem纯黄色；变换：旋转（270度）平移（200%，0）；}
.MW ContentWrapper.Popup4{边框底部：15.625rem纯绿色；变换：旋转（360度）平移（0300%）；}
@关键帧捕捉{
0% {
变换：平移（0，-200%）旋转（180度）；
}
100% {
变换：平移（0，0）旋转（180度）；
}
}
@关键帧SnapInRight{
0% {
变换：平移（200%，0）旋转（270度）；
}
100% {
变换：平移（0，0）旋转（270度）；
}
}
@关键帧SnapInBottom{
0% {
变换：平移（0，200%）旋转（360度）；
}
100% {
变换：平移（0，0）旋转（360度）；
}
}
@关键帧SnapInLeft{
0% {
变换：平移（-200%，0）旋转（90度）；
}
100% {
变换：平移（0，0）旋转（90度）；
}
}
.Popup1动画{
动画名称：SnapInLeft；
动画持续时间：.5s；
动画计时功能：线性；
动画延迟：0；
动画方向：交替；
动画填充模式：正向；
动画播放状态：运行；
}
.Popup2动画{
动画名称：SnapInTop；
动画持续时间：.5s；
动画计时功能：线性；
动画延迟：.5s；
动画方向：交替；
动画填充模式：正向；
动画播放状态：运行；
}
.Popup3动画{
动画名称：SnapInRight；
动画持续时间：.5s；
动画计时功能：线性；
动画延迟：1s；
动画填充模式：正向；
动画播放状态：运行；
}
.Popup4动画{
动画名称：SnapInBottom；
动画持续时间：.5s；
动画计时功能：线性；
动画延迟：1.5s；
动画填充模式：正向；
动画播放状态：运行；
}
@仅介质屏幕和（最小宽度：40.063em）{
html{字体大小：10px！重要；}
}
@仅介质屏幕和（最小宽度：64.063em）{
html{字体大小：12px！重要；}
}
@仅介质屏幕和（最小宽度：90.063em）{
html{字体大小：14px！重要；}
}
@仅介质屏幕和（最小宽度：120.063em）{
html{字体大小：16px！重要；}
}

我尝试更改这一行：

.Circle-Container-Inner{position:relative;width:31.25rem;height:31.25rem;left: 50%;

为此：

.Circle-Container-Inner{position:fixed;width:31.25rem;height:31.25rem;left: 50%;

---

使位置固定。因此，您可以使用所需的位置编辑将整个内容添加到另一个容器中：例如，将相对位置添加到Circe容器类

这是由于内容溢出造成的。用这个

.Circle-Container{
    overflow:hidden;
}

这是一个工作原理。

什么是“奇怪的像素偏移”？它发生在什么浏览器中？你说的“奇怪的像素偏移”是什么意思？我不明白。在最后一部分中唯一会移动的是整个图形，这是因为滚动条消失了，所以图形的位置会移动。只需隐藏滚动条作为解决方案。

.Circle-Container{
    overflow:hidden;
}