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


#1

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.


#2

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


#3

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.


#4

Do you have a sample codepen?


#5

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”.