Пропала страница(верстка) на Safari, в чем может быть проблема?
Сафари:
Хром:
Сайт: https://elysium-demo.web.app/
Добрый день, к сожалению нет apple техники чтобы дебажить safari.
Если у кого-то была такая проблема, то может кто сказать предположительно почему?
Верстка на React, Typescript.
На пк отображаются таблицы, на телефоне ul li.
Если у вас есть предположения, почему поломалась верстка, то пожалуйста напишите.
Css-prefix используются.
Дополнительно:
Не знаю почему, но всё появляется, если сделать
* { position: relative; } |
* { position: relative; }
Делать такого конечно не нужно. Возможно, где-то в стилях есть какая-то тёмная магия с позиционированием и z-индексами? Сафари и так кошмарен, а через браузерстак и подавно, так что глубоко во вкладку Sources я не смотрел.
Спасибо этому сервису - https://live.browserstack.com/
там я бесплатно доступ к удаленному пк с safari получил на 10 минут.
Короче проблема была в том что у меня таблицы в верстке использовались (решил выебнуться и на них сверстать чтобы если контента много будет, то он связно и резиново двигался бы)
и у controls(верхней штуки где по логике должны быть кнопки) я через thead tr pos relative и ::after задал background с border-radius
(т.к у ебучих таблиц border-radius не задается). в этом и была проблема.
НЕ ИСПОЛЬЗУЙТЕ ::AFTER/::BEFORE на таблицах.
Ниже уже написал решение.
Ответы:
Я нашел решение.
Спасибо этому сервису - https://live.browserstack.com/
там я бесплатно доступ к удаленному пк с safari получил на 10 минут.
Короче проблема была в том что у меня таблицы в верстке использовались (решил выебнуться и на них сверстать чтобы если контента много будет, то он связно и резиново двигался бы)
и у controls(верхней штуки где по логике должны быть кнопки) я через thead tr pos relative и ::after задал background с border-radius
(т.к у ебучих таблиц border-radius не задается). в этом и была проблема.
НЕ ИСПОЛЬЗУЙТЕ ::AFTER/::BEFORE на таблицах.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Пропажа верстки на Safari может быть вызвана несколькими причинами. Вот несколько возможных причин и способы их решения:
1. **Проблемы с CSS**: Проверьте, правильно ли вы используете CSS свойства и селекторы. Некоторые браузеры, включая Safari, могут быть более строгими при интерпретации CSS, чем другие. Убедитесь, что все свойства и селекторы поддерживаются Safari.
2. **Проблемы с JavaScript**: Если на вашем сайте есть JavaScript, убедитесь, что код написан правильно и не вызывает ошибок в Safari. Некорректный JavaScript может привести к пропаже верстки на определенных браузерах.
3. **Проблемы с кросс-браузерной совместимостью**: Иногда верстка может отображаться по-разному в разных браузерах из-за различий в их реализации стандартов. Убедитесь, что ваша верстка совместима с Safari, а не только с другими браузерами.
4. **Проблемы с кэшированием**: Иногда проблемы с отображением могут быть вызваны кэшированием браузера. Попробуйте очистить кэш Safari и перезагрузить страницу.
5. **Проблемы с адаптивным дизайном**: Если ваш сайт имеет адаптивный дизайн, проверьте, правильно ли он отображается на устройствах с разными разрешениями экрана. Возможно, пропажа верстки связана с проблемами в адаптивной верстке.
Если после проверки всех этих аспектов проблема с пропажей верстки на Safari все еще остается, рекомендуется провести дополнительное тестирование и отладку кода, чтобы выявить и устранить возможные ошибки.