Problem in lazy load ion-list render

Ionic Framework Ionic Angular
1

I have a component (an ion-list) that is being used as a lazy load container. At first 10 elements are displayed. Then, 10 new elements are displayed when the user scrolls to the button. The component has an h3 tag with some CSS code to hide the overflow with the text-overflow: ellipsis property. The first elements loaded in the ngOnInit method are well-rendered, but the new ones are not showing the dots. I have checked the element with the inspector and they have the style applied.

Important: This issue is only reproduced in Safari and iOS devices. It works nicely on Android and Google Chrome.

2

Recommend to you use CDK_VIRTUAL_SCROLL this solve you list problem.

This is very performance when charge a big list

:slight_smile:

3

@migue99angel can you provide a stackblitz or a Github link reproducing the issue?

Also if you have large lists in your application I would recommend using the Ionic Infinite Scroll: Infinite Scroller | ion-infinite-scroll Action Component

4

I have solved this by adding a setTimeout and the overflow-x class inside. I think this is an Ionic bug, I will report it on Github. Thank you both!