Почему не виден текст на IOS?

Question

[kat0555]

Всем привет! Очень нужен совет опытного верстальщика под IOS
На сайте есть вот такой серый блок с текстом https://yadi.sk/i/cyVJpDinlnc-mQ
Он появляется при клике на чекбокс и везде работает нормально, кроме устройств на IOS.
На IOS текст не виден, но когда пытаешься выделить его пальцем - появляется.
Для наглядности видео https://yadi.sk/i/oSdDte3GsCu17g
Ссылка для примера dev.goodbuying.ru/oczenka/?order=208132

Comments

[Rustam Bainazarov]

Издеваетесь? Определить проблему в коде без возможности проверить сам код?

[kat0555]

Рустам Байназаров, извиняюсь, ссылка для теста dev.goodbuying.ru/oczenka/?order=208132

[Салават Салахутдинов]

Проверил у себя на айфоне, текст виден и все работает

[Rustam Bainazarov]

kat0555, iOS 12 и 13 — работает. Подскажите, на какой версии наблюдается проблема?

[kat0555]

Рустам Байназаров, Проверяю на iphone 6, IOS 12.4.2 Браузеры Siri и Chrome - результат одинаковый

[Rustam Bainazarov]

kat0555, да, я тоже на iPhone 6 (iOS 12) и iPhone X (iOS 13). Попробую ещё раз, конечно.

[Rustam Bainazarov]

kat0555, да, еле обнаружил, но на iOS 11. Это баг рендеринга в Safari из-за overflow, opacity и т. п.

Я решал так, например:

/* Добавляем к этому правилу следующее */
.checkout .checkout-form .info-container.visible {
    transform: translateZ(0);
}

Попробуйте.

[kat0555]

Рустам Байназаров, да, помогло. Спасибо большое!

[Rustam Bainazarov]

kat0555, пишу ответ.

Answer 1

[Rustam Bainazarov]

Это баг рендеринга в Safari из-за overflow, opacity и т. п.

Я решал так, например:

/* Добавляем к этому правилу следующее */
.checkout .checkout-form .info-container.visible {
    transform: translateZ(0);
}

Попробуйте.