在iOS上反应js dom元素故障

Question

我正在创建一个reactjs网络音乐应用程序，您可以在其中简单地上传曲目并收听它们。一切都可以在PC上正常运行（mozilla-chrome-IE ...），但是当我在iPhone（7）上的Safari中打开它时，它开始出现毛刺并显示出一些奇怪的颜色...我不明白为什么。当我加载页面时，一切正常，但是当我单击播放按钮或关闭Safari并重新打开时，我得到了： glitch 1

glitch 2

加号，播放按钮和暂停按钮之类的东西都是SVG。

以下是播放按钮的呈现方式示例：

JSX：

        <div className="play_button" onClick={() => this.props.handleTrackStatus(thisTrackId)} dangerouslySetInnerHTML={trackActionButtonIcon}>

图标是svg：

let Icons = {
  "play" : {
    __html : '<svg class="action_button_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>'
  }
}

css：

.action_button_svg {
  height: 100%;
  width: 100%;
  fill: white;
}

.play_button {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #1e1e78;
  padding: 10px;
  filter: drop-shadow(0px 3px 5px #301e78);
  transition: background-color 0.3s;
}

.play_button:hover {
  background: #5427cc;
}