CODEWITHSUNDEEP
htmlioscsscordovaios11
Fabio Ricci
Fabio Ricci

Reputation: 387

iOS 11, Cordova app sidebar disappears on scroll

we published several apps based on Cordova for iOS. The graphical interface framework we used was AdminLTE, derived from Bootstrap. In all the apps, we have a sidebar, whose position is fixed in CSS. Beside it, we have a scrollable content (a series of LI inside an UL list). Everything was fine until iOS 10, but now we have a strange behaviour. Scrolling the content, the sidebar simply disappears. I have read many suggestions (especially this Overflow scrolling not working on position fixed element iOS). None of the solutions really work. But the strangest thing is that this behaviour only started in betas of iOS11 (while the proposed solutions are from iOS 5 and later).

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

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

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

So, anybody has faced this particular situation?

Thanks Fabio

Upvotes: 4

Views: 737

Answers (1)

Chase
Chase

Reputation: 2306

Try giving an actual value to the z axis. ie: transform: translate3d(0,0,1px).

I've found that I have better luck engaging hardware acceleration with that, rather than an empty zero value.

But I doubt it'll fix the problem entirely. I'm having all sorts of disappearing content issues with iOS 11 and can't fix them. Strangely, I can't reproduce them in the normal mobile Safari browser. They only show in the headless web view.

Upvotes: 1

Related Questions