Ionic 1 some “ng-repeat” item are displayed or some of them are not displayed in IOS 11.0.3

I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e

<div class="list-container" ng-cloak>
  <div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
    <div class="message" ng-cloak>
      <span ng-cloak>
          <a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
            {{ message.message }}
            <strong ng-cloak>{{ message.annotation }}</strong>
            <span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
      </a>
      </span>
      <div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
    </div>
  </div>
</div>

The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some “ng-repeat” item are not displayed .when I scroll up and down sometime Items are visible or some not.

Please check following screen-short for better clarity.

When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed



Any kind of help or suggestion is appreciated.

Thanks in advance.

You can try by adding overflow-scroll to your ng-repeats parent div.

Thanks @thesourav , I tried this option so many times but didn’t get any success. Still facing this issue in IOS 11.0 device’s.

Do you have a sample codepen?

When I run the app via using “ionic serve”. This works well in web-browser and Android devices and event working well in IOS 10 devices as well. This issue I only faced with IOS devices with IOS 11, so unable to re-produce this in “jsFiddle/codepen”.