I’ve found some weird behaviour while adapting my app to use overflow-scroll on ion-content instead of the built-in scroll (because the built ionic scroll still is having some issues).
My app is based on cards and when i have a page larger than the viewport with cards, when i scroll down, those cards appear empty and loose some of their css borders too.
If i tap on them though, the content appears and everything works as expected.
This is happening me while viewing my app on a nexys 5 through chrome. I’ve not tested it on iphone or cordova app.
you can see it and maybe give me some hint in http://gasparsabater.com/EMT (click on Lorem ipsum and you’ll see the cards)
Hi! Thanks for your interest.
I haven’t resolved my problem yet, but i’ve made some improvements.
I’ve discovered that this issue only happens on Android. Iphone devices are OK (safari or chrome browser)
Removing the .list class of the .card > div.list makes seems to solve the issue.
Putting a $timeout (1s) on my controller, makes the hidden card automatically show when the timeout is finished.
I’ve recorded my screen to show the problem. As the problem does not happens always, its hard to show exactly what happens. In this video that i’ve made, the issue happens when scrolling down and then scrolling up.
You can see it in this link https://www.dropbox.com/s/u7g1z4zd6uz8u1l/demo.mp4 because the forum dont allow me to upload .mp4 files.
Very interesting. I’m attaching a GIF that shows what I discovered when switching between iPhone4 and Nexus 5 in the Chrome Emulator.
It seems the top card (that contains an input field) goes blank when switching if it is scrolled out of view. The placeholder text disappears.
Can you try this? Put something in the $scope for buscar.texto so that it has a value as soon the the controller loads. Then, that field should have a real value in it other than just placeholder text. Then, switch back and forth like I do in this demo GIF. I want to see if the placeholder is the only thing that gets hidden or if real content does as well.
Then, can replace that input temporarily with just text and see if the problem occurs with just text like :
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
Due to the behaviour of my app, I cant put a default text to buscar.texto because I have some ng-show and ng-hide directives that shows certain cards when buscar.texto.length > 1
But I’ve replaced the top input card with the code you’ve provided here.
At this point I can tell that the whole content dissapears because the top card and the second card hide their content. and the second content is just plain text. Not only a placeholder.
On my nexus 5 Real device, this occurs on chrome app, Chrome beta app, and cordova app
Really unusual because Ionic doesn’t really do any background work with cards. There are no Service or delegates involved - it’s really just CSS layout.
I’m going to open a bug report on this. It might not get much attention though as this is really just a rendering problem.
This is exacly what i though, its a CSS problem. For me looks like a rendering bug on the android browser related to some unusual CSS attribute used in cards.
I’m probably going to solve this implementing a $timeout 300 (which is going to make the cards blink in some cases) or removing the item class inside the card and applying the padding and other attributes again directly on the card.
In any case, its weird but I’ve enjoyed our little conversation and I really appreciate this community feedback.
I really hope that the ionic implemented scroll gets better performance and we can use it on our projects.
I’ve sorta solved the issue by setting a timeout which prints a number on the screen every 100ms. This must force some kind of reprint and the hidden cards become visible after that fraction of second. This way the bug is almost unappreciable.
I guess that this constant abuse of repaint will cause several lag issues on old phones so I will probably try to find a solution just with CSS.
I’m glad you go at least a hack working properly. We’ll see if the devs have some light on this from the issue. Keep an eye on it, but it may take them a week or 2 to get to it.
I would like to inform you (and any other interested) that with the last beta3 release of the framework, seems that the issue has been solved. Even that the post that you posted (#1094) on github is still marked as open.
I will let some time to it but looks like now works fine.
Thanks!
Hi all! I experienced something similar and in my case it was related to load data async from websql. Calling $scope.$apply() in your complete callback fixed the issue.
