Html Safari上的背景色转换CSS工作不正常

我的问题非常直观，正如你在图片中看到的。每张幻灯片都与应用于主体的背景颜色相匹配（.active-slide-x是主体随当前幻灯片而变化的一类）。我们从黑色开始，最后是白色背景，中间有不同的灰色。在Javascript中，红色的圆形移动及其大小根据幻灯片的不同而变化

但在Safari上，背景只会随着红色圆圈的移动而改变。即使是红色的导航也有一些问题（白色背景不正常）

我的CSS代码：

body {
  transition: background-color 500ms ease;
  -webkit-transition: background-color 500ms ease;
  -moz-transition: background-color 500ms ease;
  -o-transition: background-color 500ms ease;
  background-color: #000;
 }

.active-slide-1{background-color: white;}
.active-slide-2{background-color: #f4f4f2;}
.active-slide-3{background-color: #d4d3d1;}
.active-slide-4{background-color: #a5a29b;}
.active-slide-5{background-color: #76716c;}
.active-slide-6{background-color: #4c4843;}
.active-slide-7{background-color: #262321;}
.active-slide-8{background-color: black;}

Safari应用webkit转换，但不是很好。在iPhone和iPad上也是如此

---

对不起，我的英语，我是法国人，但希望能找到一个解决办法与你

您可以在添加html或创建提琴吗？您可以在添加html或创建提琴吗？