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