Chrome не отображает текст, если он изначально скрыт - PullRequest
0 голосов
/ 13 января 2019

Моей целью было сделать простую кнопку Load More. У меня был container div, который содержал в общей сложности 20 компонентов, и я только хотел показать и загрузить 5 одновременно. Я начал с того, что сделал высоту container равной высоте всего 5 компонентов с помощью overflow: hidden, чтобы не показывать остальные компоненты. После нажатия кнопки Load More высота container была изменена на высоту десяти компонентов, таким образом, показывая 10 компонентов; затем он был изменен на высоту 15 компонентов и т. д.

Это отлично работало в Firefox и Safari, однако, когда я попытался загрузить больше в Chrome, часть текста не отображалась. После проверки в инспекторе было ясно, что текст на самом деле был там, просто не визуализирован.

missing text Когда это должно выглядеть так:

correct text

Эту проблему можно решить, сосредоточившись на данном компоненте (например, выделив скрытый текст или наведя курсор на кнопку внутри компонента). Однако, чтобы пользователи сосредоточились на компоненте, чтобы увидеть, что он говорит, это не очень хорошая практика.

Я пытался сделать все компоненты скрытыми, а когда нажата кнопка Load More, сделать только что загруженные компоненты не скрытыми, но безрезультатно. Я также попытался установить innerHTML каждого компонента на себя, который также не работал.

1 Ответ

0 голосов
/ 13 января 2019

В конечном итоге, решение, которое сработало, заключалось в установке определенного стиля container

.component {-webkit-transform: scale3d(1, 1, 1);}

Я не знаю, почему это сработало, поэтому, если у кого-то есть ответ, почему это работает, прокомментируйте ниже.

...