I’ve come across an issue with Ionic 3 running later versions of iOS where HTML elements are disappearing on scroll. Please see the gif below showing the issue. I have tried applying this css below on the problem elements that was submitted on a similar thread in Github. This has not had any effect. The bug doesn’t happen on iOS 10 and below as well as any Android devices.
After further investigation it seems the problem elements are those which content is dynamically generated. When scrolling on iOS 11+ it seems the javascript is disabled causing the elements to have no value and hide. If anyone has an idea about what iOS has done that would help me figure out a solution I’d greatly appreciate it.
I don’t know if ios disable javascript when scrolling (seems weird) but it would not cause such an issue anyway. The javascript may modify the DOM at some point in time but when it’s done it’s done. You don’t have to actively “maintain” the state of your elements in the DOM, so if you add a div using javascript, you’re done, you modified the tree and disabling javascript will not change anything.
For your problem, it looks more of a css problem to me. Maybe some optimizations done by the browser / os that creates a side effect on transforms when scrolling, it’s just speculations at this point.
The first thing I would do is to simplify the css as must as possible, removing animations, transforms etc until the bug disappear, then add them back one by one.
Thanks, you might be right, my reasoning came from another thread (not ionic related) where they were having the same issue with dynamically generated content. When I checked my problem elements both were dynamically generated. The only other similarity were their relative position, however changing it to absolute or fixed made no difference (apart from munting up the styling a bit). As you can see in the example it’s the ionic slides disappearing, I haven’t added any custom css to them, it’s straight out the ionic box.
