passy / angular-masonry

An AngularJS directive for Masonry.
https://passy.github.io/angular-masonry
MIT License
1.12k stars 216 forks source link

Ionic with Angular Masonry #198

Open Nikko-Foti opened 7 years ago

Nikko-Foti commented 7 years ago

I am working on optimizing a mobile app (built with angular1/ionic1) for iPad and have been running into issues. I am trying to create a two column masonry effect that loads each "card item" (returned from a network request) from left to right with Angular Masonry. It seems to work very well locally but not very well when i test on an actual iPad. I am testing on my iPad Mini 2 (which is around 3 years old) and when the app first loads, for around a second, all of the images returned from the network request stack/overlap on top of each other before the masonry effect kicks in and formats it the way I want it to. The app also uses ionic infinite scroll so when users scroll down, another network request is made which returns more "card items". These card items also stack on top of each other for around a second upon first being rendered to the page.I feel as if this could be a performance issue. The reason I think this is because Angular Masonry works very well locally and this "overlap" bug only happens when i test on my iPad Mini 2.

Does anyone have any experience using Angular-Masonry with Ionic Apps? I have been working on trying to fix this for days and am unable to pinpoint what exactly is going wrong.