Chrome响应式模式下轮播图切换时固定内容移位问题

问题现象 #

• 页面轮播图设置右侧滑入动画后，Chrome响应式模式下，相对body定位的固定元素（“Walk me through”和聊天图标）出现突然移位；正常浏览器模式无此异常。
• 图片滑入时网页宽度增加，滚动条尺寸同步变大。

排查过程与验证 #

• 移除come-from-right动画中的translateX(100%)属性，固定元素移位问题消失。
• 将translateX(100%)替换为translateX(-100%)，问题同样得到解决。
• 即使强制设置body宽度为100px，轮播图仍会占用大量额外空间。

最终解决方案 #

添加CSS样式限制轮播图图片的宽度：

.slider img {width:200px;}

设置后所有内容恢复正常。

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