Невидимый текст в модальных диалогах с Chrome
Я столкнулся с проблемой в проекте, над которым я сейчас работаю. У меня есть ряд модальных диалогов, созданных с помощью CSS (display: fixed), которые по умолчанию скрыты с помощью display: none;. В Chrome при открытии этих диалогов весь текст невидим (я могу выделить его, но он не виден). Используя инспектор, я могу изменить, например, его вес шрифта, и текст будет виден, даже при возврате к исходному весу шрифта. Я использую пользовательский шрифт (MuseoSans), импортированный со следующим кодом CSS:
@font-face {
font-family: "MuseoSans";
font-style: normal;
font-weight: 100;
src: url("../fonts/MuseoSans_100-webfont.eot?") format("eot"), url("../fonts/MuseoSans_100-webfont.woff") format("woff"), url("../fonts/MuseoSans_100-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_100-webfont.svg#MuseoSans") format("svg"); }
@font-face {
font-family: "MuseoSans";
font-style: normal;
font-weight: 300;
src: url("../fonts/MuseoSans_100-webfont.eot?") format("eot"), url("../fonts/MuseoSans_100-webfont.woff") format("woff"), url("../fonts/MuseoSans_100-webfont.ttf") format("truetype"), url("../fonts/MuseoSans_100-webfont.svg#MuseoSans") format("svg"); }
Я обнаружил, что если в этих диалогах я переключаюсь на семейство шрифтов: Verdana; например, текст будет всегда видимым. Есть идеи? Я мог воспроизвести это поведение только в Google Chrome (52.0.2743.116 (Build oficial) m (32 бита)).
РЕДАКТИРОВАТЬ: обнаружил, что он работает как следует, если размер шрифта и вес отображаются в видимом месте до открытия модального диалога.