#reactjs #safari #rendering #mobile-safari
#reactjs #safari #рендеринг #mobile-safari
Вопрос:
Я создаю список карточек, каждая из которых отображает некоторые данные вместе с тремя строками, которые позволяют пользователю перейти к определенному расширенному разделу этой карты.
По какой-то причине Safari, похоже, отображает три строки навигации для каждой карты, но они белые и прозрачные. Я знаю, что они отображаются, потому что я все еще могу щелкнуть по пространству, где будет строка, и навигация работает, как ожидалось. Это просто невидимо.
Эта проблема не возникает при использовании Chrome. Это происходит только в Safari: как на моем рабочем столе в браузере, так и при запуске Safari на iOS. В консоли нет ошибок.
Еще одна странная часть головоломки заключается в том, что когда я проверяю элементы в Safari, они появляются на экране! Вот ссылка на видео, которое я снял, чтобы показать поведение.
Есть идеи???
Комментарии:
1. если вы видите это только в Safari, а не в других браузерах, то у вас уже есть ответ. Это специфичная для Safari проблема, и ее исправление сводится к изучению специфичных для Safari проблем CSS и исправлений с помощью bootstrap или вашего CSS или темы, если вы ее используете. Помните, что каждый браузер реализует CSS по-своему. по моему собственному опыту, я обнаружил, что Safari намного более строгий с точки зрения стандартов и форматов, и часто многие вещи CSS работают не так хорошо. это всего лишь мой опыт, а не научно-техническая мысль.
2. Спасибо, Джей. Вчера, после тонны копания, я наконец нашел пару похожих проблем. В комментариях указано то же, что и у вас. По сути, мне нужно удалить CSS, пока я не найду проблему.
Ответ №1:
На случай, если кто-нибудь наткнется на это, я последовал совету Джея и начал обрезать CSS. В конце концов я понял, что в «строках обновления» установлены как display: «flex», так и position: «relative». Как только я удалил position: «relative», который изначально ничего не делал, но, должно быть, был добавлен по ошибке, Safari отрисовал его идеально.
TLDR: для Safari отображение: «flex» и позиция: «relative» в одном и том же div создали проблемы с рендерингом.