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.
transform: translate3d(0, 0, 0)!important;
-webkit-transform: translate3d(0, 0, 0)!important;
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.