У меня проблема с видимостью элементов HTML в Safari ( Mobile and Desktop ), которые не отображаются на переднем плане, из-за которых я потратил не менее 8 часов на устранение неполадок при попытке решить проблему.
Концепция, которую я преследую, кажется очень простой;Я пытаюсь отобразить пару меток (<p> и <a> в пределах <div>, то есть position:absolute;. Я использую сторонний поток Javascript, который вызывает абсолютное позиционирование, но яЯ готов внести любые изменения, необходимые для того, чтобы это работало.
Естественно, я предполагал, что это проблема z-index, которая влияла только на Safari, но в Chrome, IE, Edge и Firefox нет проблем с рендерингом, включаяМобильные устройства Android.
Проблема может быть легко воспроизведена на сайте www.bibleanthem.com, если посмотреть на обложку мультимедиа из iOS / Safari и, вероятно, macOS: в течение короткой секунды, пока она изначально загружается, элементы видныи затем обложка альбома перемещается на передний план. Вы также можете увидеть небольшой намек на значок «+1» в углу у нижнего края обложки альбома. Вы даже можете щелкнуть там, где находятся две невидимые кнопки ивзаимодействовать с документом (например, немедленно воспроизвести песню или добавить в список воспроизведения) .
Что я пробовал
- Изменение (и полное удаление IIRC)
transform использование от каждого элемента Coverflow (важную информацию см. В разделе «Дополнительная информация» ниже) z-index изменения (включая нелепо большиезначения, такие как 10000000000000) - Изменение
position на фиксированный, относительный, закрепленный за родительским div - Изменение
position на фиксированный, относительный, прикрепленный для дочерних элементов - Изменение
display между блоком и встроенным блоком - Изменение
overflow для большинства элементов в иерархии
Дополнительная информация
- В прошлом я видел проблемы с Safari, который плохо играл с
transform;это может быть проблемой здесь, и симптомы очень похожи на мой прошлый опыт, но я не смог решить проблему.Вот где я думаю, что проблема на самом деле заключается в этом.
Визуализированный HTML для каждого элемента Coverflow
<div style="position: absolute; display: block; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; max-width: none; max-height: none; border: none; line-height: 1; background-color: transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 95px; transform: translate(142px, 119px); opacity: 1;"><p class="largeLabel"><a href="javascript:;" onclick="...not shown" title="Add to Playlist (play next)" class="rel-title-play-next round-button"><i class="fa fa-list-ol"></i><span class="badge">+1</span></a><a href="javascript:;" onclick="...not shown" title="Play Immediately" class="rel-title-play-now round-button"><i class="fa fa-play play-btn-adjust"></i></a></p><p class="smallLabel"><span class="title-cf-main">Song Title</span><br><span class="title-cf-artist">Artist Title</span><br><span class="title-cf-verse">Acts 17</span></p></div>
Как воспроизвести
- Посетите веб-сайт www.bibleanthem.com с настольного или мобильного Safari и обратите внимание, как обложка альбома занимает приоритетное положение над меткой / текстом.
Желаемый конецШтат
- Должны быть видны синий фоновый ярлык, название песни, название исполнителя и название стиха над обложка альбома в обложке (как видно в не-Safariбраузеры)
Заранее благодарим за любую помощь, которую вы можете оказать.Я не могу сказать вам, как бы я хотел решить эту проблему!