[Bug] HTML elements disappear while scroll ion-content (IOS11)...

[ionitron-bot[bot]]

Original issue by @LabDeve on 2018-01-10T10:17:14Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

ionic info: cli packages: (/Users/xxxx/xxxx/xxxx/xxxx/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 25.2.3
ios-deploy        : 1.9.2 
ios-sim           : 5.0.13 
Node              : v6.11.0
npm               : 4.6.1 
OS                : macOS High Sierra
Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

ANDROID_HOME : /Users/xxxx/Library/Android/sdk

Misc:

backend : legacy

Current behavior: While I scroll an ion-content with some elements inside (div, ion-grid, canvas, custom objs), randomely one or more items disappear.. With safari's debugger i can see the html structure and css right, but they remain invisible on the display...

Expected behavior: The elements should not disappear.

[8tomo8]

Having the same issue. Any solutions?

[phyr0s]

+1

[gchokhonelidze]

same happens to me on React, looking from chrome on IOS, any solution?

[pedrovitor074]

did u guys find some way to fix this ?

[padejar]

I have the same problem, but it happens when i use dynamically generated content from an api. I am using infinite scroll for the pagination. it works fine in android and browser, but looks like the screen shot both in the real devices and simulators.

[8tomo8]

I managed to fix this issue. You must target all elements exactly like this.

`@supports (-webkit-overflow-scrolling: touch) {

• { -webkit-overflow-scrolling: auto; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } }`

[RicardoElSabio]

8tomo8 where do you add this code?

[8tomo8]

8tomo8 where do you add this code?

You add it in the scss file for the corresponding html file with the issue.