IOS 11, the sidebar of the Cordova app fades to scroll

Question

We have published several Cordova-based apps for iOS. The GUI we used was AdminLTE, obtained from Bootstrap. In all applications, we have a sidebar whose position is fixed in CSS. In addition, we have scrollable content (LI series inside the UL list). Everything was fine until iOS 10, but now we have weird behavior. Scrolling through the contents, the sidebar just disappears. I read a lot of suggestions (especially the Overflow Scrolling, not working on a fixed element of iOS position ). None of the solutions really work. But the strangest thing is that this behavior only began in beta versions of iOS11 (while the proposed solutions are taken from iOS 5 and later).

When I say that this does not work, I mean that this is a fix:

.main-sidebar * {
    transform: translate3d(0,0,0); }

applies correctly to the first interior element of the .main-sidebar, while other sub-elements still disappear.

So, has anyone encountered this particular situation?

Thanks Fabio

Answer 1

Try to give the actual value of the z axis. i.e transform: translate3d(0,0,1px). : .

I found myself lucky with hardware acceleration with this, and not with an empty null value.

But I doubt that this will solve the problem completely. I have all kinds of endangered content issues with iOS 11 and they cannot fix them. Oddly enough, I cannot play them in a regular Safari mobile browser. They appear only as headless web pages.