Реагировать JS DOM элементы глюк на IOS - PullRequest
Новая
       16

Реагировать JS DOM элементы глюк на IOS

0 голосов
/ 06 марта 2019

Я создаю музыкальное веб-приложение реагировать, где вы можете просто загружать свои треки и слушать их. И все отлично работает на ПК (mozilla-chrome-IE ...), но когда я открываю его в Safari на моем iphone (7), он начинает глючить и показывать некоторые странные цвета ... Я не понимаю, почему. Когда я загружаю страницу, все в порядке, но когда я нажимаю на кнопку воспроизведения или закрываю Safari и снова открываю, я получаю это: глюк 1

глюк 2

Такие вещи, как плюс, кнопка воспроизведения и кнопка паузы, являются SVG.

Вот пример рендеринга кнопки воспроизведения:

JSX: 

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

Икона является символом: 

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;
}
...