Safari上的背景颜色过渡CSS运行不正常

Question

我的问题非常直观，正如您在图片中看到的那样。每个幻灯片都匹配一个应用于正文的背景颜色（.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上都是一样的。

对不起我的英语，我是法国人，但希望能找到解决方案！