#javascript #reactjs #iphone #button #text
#javascript #reactjs #iPhone #кнопка #текст
Вопрос:
У меня возникли некоторые проблемы с отображением текста в кнопках ответов после первого экрана, когда вы нажали «воспроизвести» на iPhone. Например. это работает везде, но не на iPhone. Вот демонстрационная версия — https://xahtc.github.io/test-app а здесь вы можете найти мой проект по react — https://github.com/xahtc/test-app . Кто-нибудь знает, в чем проблема?
Комментарии:
1. @ShamarYarde не могли бы вы предоставить мне экран, пожалуйста, потому что я проверил много устройств, и проблем с адаптивностью нет
2. Извините за удаленный комментарий. Я не знаю, как предоставить скриншот при переполнении стека. Единственное место, о котором я могу думать, это раздел ответов, но это только для ответов. Он работает на Android, хотя использует интернет-браузер Samsung.
3. @ShamarYarde да, он работает и на Macbook, проверял, но на iPhone он не работает)
Ответ №1:
Проблема, похоже, заключается в том, что, по крайней мере, в Safari IOS (я тестировал на iPad IOS 14) псевдоэлементы в Game_answer__2Ffxs отображаются перед текстом в полях ответов, несмотря на наличие z-index: -1.
Я не решаюсь говорить о контекстах z-index и стекирования, преобразованиях и тому подобном, потому что в прошлом я ошибался, но для этого вопроса важно то, что на IOS текст перезаписывается, а отрицательный z-индекс не дает желаемого эффекта.
Одна немедленная вещь, которую нужно попробовать, — это поместить background-color: #fff , например, что-то полупрозрачное (я использовал background-color: rgba(255,0,0,0.5) ), чтобы вы могли сами увидеть, что покрывают эти псевдоэлементы.
Вы увидите, что текст есть, но также вы увидите центральную строку, которую, без сомнения, должны были покрывать эти псевдоэлементы. Я думаю, должен быть другой способ избавиться от этого — или отбросить его на данный момент в интересах пользователя, видящего ответы, и заменить #fff на transparent .