Ion-scroll items are hidden


#1

Hello,

I use beta6 and I have strange ion-scroll behaviour when try to filter the list.

It works properly in Chrome but not on Android!!

I use Nexus 4.

This is my implementation:

<ion-scroll direction="y" scrollbar-x="false" scrollbar-y="false">          
     <wm-contacts-list
         filter-by-name="{{contactNameFilter}}"
         on-contact-click="onContactClick(value)"
         ></wm-contacts-list>
    </ion-scroll> 

The wm-contacts-list directive has some images and text.

When I type something in search input, I see proper filtered values. But when I try to remove something from search input I get empty list. See this print-screen:

However, when I debug Android (through Chrome) I see the list (8 items):

When I select <div class="scroll"> I see in style:

-webkit-transform: translate3d(0px, 0px, 0px) scale(1);

After unchecking the style checkbox, suddenly I start to see all items as expected.

What is the problem, how can I get rid of it? Can somebody spread a light on that?

[EDIT]

Description about webkit-transform: translate3d(0px, 0px, 0px)

Thanks,


#2

I would love to know if you have resolved this - I am having a similar issue.


#3

I’ve got this same issue : I receivre below the the displaying of blank background, without any content, moreover there is no scroll bar.
Please how to resolve this issue ?

Ionic info :
cli packages: (C:\Users\Gardien\AppData\Roaming\nvm\v8.8.1\node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 25.2.5
Node : v8.8.1
npm : 5.4.2
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : C:\android-sdk-windows
Misc:
backend : pro


#4

I didn’t expect it because this page indicates that this component will works with ionic-cordova version 3.9.2 https://ionicframework.com/docs/api/components/scroll/Scroll/

I’ve tested both on a browser and on a device without any results :

<ion-header>
  <ion-toolbar>
    <ion-row>
     <ion-title><ion-chip>
        <ion-icon  name="calendar" color="light_textCol"></ion-icon>
      </ion-chip></ion-title>
   </ion-row>
  <ion-buttons start>
      <button ion-button (click)="goBack()">
       <ion-icon name="arrow-back" color="light"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content id="ion-content">
  <ion-scroll scrollY="true" scrollY="false"> 

   <ion-row>
      <ion-col>
         <ion-card left style="text-center:0;text-align:center;">
            <p class="dayDate" color="light_textCol">{{date1}}</p>
            <img [src]="pict1">
         </ion-card>
      </ion-col>
      <ion-col>
         <ion-card left style="text-center:0;text-align:center;">
             <p class="dayDate" color="light_textCol">{{date2}}</p>
            <img [src]="pict2">
         </ion-card>
      </ion-col>
      <ion-col>
         <ion-card left style="text-center:0;text-align:center;">
             <p class="dayDate" color="light_textCol">{{date3}}</p>
            <img [src]="pict3">
         </ion-card>
      </ion-col>
    <ion-row>

  </ion-scroll>
</ion-content>