Ionic 2: Virtual scroll rendering issue with sidemenu open and scroll position below top

[daveshirman]

Ionic version: (check one with "x")
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
If you move the scroll position below the very top on a virtual scroll component, then open a side menu, the rendering goes bonkers.

Expected behavior:
Nothing should change about the view if the side menu is opened above it.

Steps to reproduce:

1. Make a page with a virtual scroll list
2. Add a side menu
3. Scroll down a bit
4. Open the side menu and see the rendering knackered.

Note: Only appears to happen on my Android handset (Chrome). Not on desktop. Haven't tried iOS.

See gif:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Davids-Air:apphazard-app daveshirman$ ionic info

Your system information:

Cordova CLI: 6.2.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 8.1 Build version 8B62

[sebaferreras]

@daveshirman have you found any workaround for this issue?

The same happens to me with a simple <ion-list>...</ion-list> with just a few ion-item. It only happens on Chrome (tested on Safari, and works properly).

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.1 Build version 8B62

[daveshirman]

No, this happens on the device itself (any Android I've tried so far).

…

On Dec 10, 2016 08:21, "Sebastián Ferreras" ***@***.***> wrote: @daveshirman <https://github.com/daveshirman> have you found any workaround for this issue? The same happens to me with a simple <ion-list>...</ion-list> with just a few ion-item. It only happens on Chrome (tested on Safari, and works properly). Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 ios-deploy version: 1.9.0 ios-sim version: 5.0.8 OS: macOS Sierra Node Version: v6.7.0 Xcode version: Xcode 8.1 Build version 8B62 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9518 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANnlXtEIDocIeJZv1Ya-gipC8tldouT1ks5rGmEGgaJpZM4LFwax> .

[aloumeau-hager]

you can search around your css maybe , when i worked with ionic1 i had the same comportement with same classes name in 2 pages but style diffrents.
hope it can help you but nothing sure

[jamesbenns]

Also having this annoying problem, how are you getting on?

[michaeldemille]

I've got the same problem, but with a twist. I've have some toggles that filter the list in a sidemenu. When I open the sidemenu after scrolling down the content disappears as was previously described. When I click a toggle everything reappears. Then when I close the sidemenu everything disappears again and I'm left with a scrollable list with no content. If I try and change filters from my current point I can't get the content back, but if I scroll back to the top and change a filter it all works again.

[ozexpert]

Having the same issue.. seems it happens with ion-list & ion-item in the content.
btw, i'm not even using virtual scroll.
Watching...

[ozexpert]

Anyone have solution to this? :-(

[quarterioningot]

Are there any updates for this issue?

[quarterioningot]

@PatrickMcD will there be in the near future? :P

[rsegovia]

Same here, anyone have a good news?

[Ross-Rawlins]

+1

[daveshirman]

@adamdbradley The team has been super silent with many of these outstanding issues and they need addressing. Any updates please?

[Ross-Rawlins]

I see on the commits that there is some virtual scroll fixes. I wonder when the next release is due.

[rsegovia]

any news?

[anthonyaicardi]

I have solved applying a neutral css matrix3D to the affected elements.

transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);

I don't know if it is memory consuming, for what I know using matrix3D force the GPU to keep a copy of the element, but if limited to few elements I think it's worthwhile.

[anthonyaicardi]

@daveshirman @rsegovia
transform: translate3d(0, 0, 0);

Shorter version.

[dertuerke]

same problem on webapp

[dertuerke]

Small fix for all that use the sidemenu.

app.scss

ion-nav {
  &.menu-content-open {
    ion-content {
      > .scroll-content {
        overflow-y: hidden;
      }
    }
  }
}

[jmlp1327]

Thanks @dertuerke
Your solution solved my problem.

[ionitron-bot]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#142