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

[LabDeve]

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.

[joeldavuk]

Probably un-related I had the same issue where I was using flex column inside a nested ion-content and had previously put in place -webkit-transform: translateZ(0px); on the flex column I recall to fix some safari issue. Which is not needed in iOS 11+

[LabDeve]

Unfortunately it does not work...

[LabDeve]

Any idea??

[andypotvin]

Has any progress been made on this issue. We have the same one and cannot find a workaround.

[LabDeve]

It's frustrating, I do not have the solution yet...

[garygrossgarten]

Having the same issue on ios.
Apply transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); perspective: 1000; -webkit-perspective: 1000; to the problematic elements. Use ionic cordova run ios --livereload to find the elements.

related post on stackoverflow:
https://stackoverflow.com/a/43636308/9330080

[pitAlex]

I have the same issue, and people should stop posting the transform trick. It stopped working since the first ios11 release.

[garygrossgarten]

@pitAlex that's not true. I tested it on iPhone X and SE, both running iOS 11.

[pitAlex]

Its not working on my layout. I'm guessing it depends on how you have the surroundings. That's why you never see the entire page disappear, just one element.
This is my alternative:

 function ElementRedraw = (node) {

                window.requestAnimationFrame(function () {
                    node.style.transform = "translate3d(0,0,0)";
                    window.requestAnimationFrame(function () {
                        node.style.transform = "";
                    });
                });
            }

var SUPPORT_PASSIVE_EVENT = (function () {
        var supportsPassive = false;
        try {
            var opts = Object.defineProperty({}, 'passive', {
                get: function get() {
                    supportsPassive = true;
                }
            });
            _window2.default.addEventListener('test', null, opts);
        } catch (e) {}

        return supportsPassive;
})();

Put that inside a handler of the "scroll" event using { passive: true }:

theScroller.addEventListener('scroll', function () {
          ElementRedraw(document.querySelector('.my-problematic-element'));
}, SUPPORT_PASSIVE_EVENT ? { passive: true } : false);

I used "style.transform", but you can use something else if it will create conflict with our own styles. As long as the property will trigger redraw.

[LabDeve]

This article could help: https://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/539