Side menu scroll feature locks after switching servers OR displaying liveview in landscape

[PartialVolume]

Platform & OS Version
Android V5.1

The version of the app you are reporting:
1.2.24 and 1.2.25 (Android build 5.1 only, cannot reproduce on HTC M8 Android 6.0) (Linux desktop build does not show bug even if you resize window so the sidebar menu needs scroll) untested on IOS

Device details:
UMI Fair Android 5.1 (UMI Fair is a rooted device) (Cannot reproduce on HTC M8 Android 6.0)

What is the nature of your issue
Bug

Details
There are two different ways of reproducing this bug. Both methods only work with Android 5.1

Method 1
With this method you will need 2 or more servers set up on zmNinja and an Android device running 5.1

Start zmNinja, it will connect to the last server you used.
Switch to a different server.
Try to scroll the side menu to the bottom of the menu. You won't be able to, however the buttons you can see all work.
Exit zmNinja
Restart zmNinja
Auto connects to last used server.
Side menu scrollbar now works.

Method 2
To trigger the bug using this method you only need one server.

Start ZmNinja, holding the phone in portrait fashion.
Makesure the side menu is scrollable.
Click either montage or monitor and bring up a liveview.
Rotate the phone into landscape
Rotate the phone back to portrait
Exit liveview using the expanding buttons
Check side menu, can no longer scroll.
With side menu still showing rotate phone to landscape and back to portrait, scroll now works.

Method 3
This is similiar to method to but starts with phone being held in landscape

Start ZmNinja, holding the phone in landscape fashion.
Makesure the side menu is scrollable.
Click either montage or monitor and bring up a liveview.
Rotate the phone to portrait
Exit liveview using the expanding buttons
click the 3 bars to bring in the side menu
Check scroll, it's locked !

As mentioned above this only seems to happen on Android 5.1 on a UMI Fair and not on Android 6.0 (HTC M8) or on the Linux64 desktop version. On my UMI Fair Android 5.1 it is 100% reproducible.

[PartialVolume]

After a bit more playing with this, those exceptions have nothing to do with the side menu. They are exceptions generated by the content drop down, ie authentication successful messages which is a different issue.

The side bar menu not scrolling may be caused by this float in index.html which apparently breaks the scroll structure ? ( I know bugger all about about Ionic so could be talking total bs here, but that's what I've read )

<span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;:text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;text-align:center;">&nbsp;{{$root.getProfileName();}}&nbsp;</span>

By rotating the phone into landscape mode the scroll feature is restored as Ionic now knows the height again.

Why it works in Android V6 ive no idea. Just got to test this theory out now.

Instead of float use margin-left:auto and margin-right:auto

Until I give it a try this is all a bit theoretical.

[pliablepixels]

does removing the complete <span> fix the issue? if so, it should not be related to multi-server switching. I have another theory - this may be due to the native transition plugin. Try the float first and if it doesn't fix, go to dev options and disable native transition. You'll need to kill the app and restart after that (make sure disable native trans is on)

[PartialVolume]

No just the float, I've not tested it yet. Having trouble with my Android build.

[PartialVolume]

I tried disabling transitions, quiting zmN and restarting, scroll still locks up after server change (scroll unlocks if you rotate the phone and then works in portrait & landscape) same as before. I've not tried changing float yet, may need to email a couple of questions re building on Android.

[PartialVolume]

I've taken out the whole <span> and the side menu scroll is now working after switching servers. Not had a chance to play with the float yet, but certainly something in that <span> is causing the scroll to lock. I'll use my modified 1.2.24 for the next couple of days just to make sure the scroll lock has not become intermittent. Certainly before it locked 100% every attempt so it's looking quite positive.

[pliablepixels]

Okay, so if you are sure the float is causing the issue, it must be a quirk for the browser for that specific platform. I'm going to have to rely on you trying some other ways to fix it (display top right) as I can't replicate it. Thanks for investigating!

[PartialVolume]

@pliablepixels OK, I think I've fixed the code for both methods of reproducing the scroll lock bug as described above. The following changes were made ..
<ion-side-menu>
to
<ion-side-menu side="left" overflow-scroll="true">

and wrapped <ion-list> with <ion-scroll zooming="true" direction="xy" style="height:95%">

And that's with the existing span for the server info left in place including the float.

I need to check it all works fine on Android 6 and the Linux desktop.

If all good, do you want me to do a pull request on the forked copy of the master I have ? (first time doing this on Github so not quite sure of the procedure yet)

[pliablepixels]

@PartialVolume - thanks for investigating.
I don't want to add all these tags - they will likely cause issues elsewhere.

Can we try this:
Just do:

<ion-side-menu side="left" >

And

wrap <ion-list> with <ion-scroll  direction="y" >

I'd like to see what is the minimal set that fixes that lock issue.

[PartialVolume]

@pliablepixels Just tried that on 5.1, doesn't work, menu locks. I'll work out what is the minimum set required is. I've a sneaky suspicion it might be the style="height:95%" but I'll get back to you once I've tested all the variations.

[PartialVolume]

This appears to be the minimum that works.
<ion-side-menu side="left" >
<ion-scroll style="height:95%">

95% leaves a small white band at the bottom of the menu. Not sure if the 95% is significant to the fix, discovered the fix here will try 98%/99% or 100% and see what happens.

[pliablepixels]

The key issue I think is why does this only occur when switching servers. What's the relation? If it really was a scroll issue, then it should occur all the time. So I'd be more inclined to see what is going on in the "switch server" code from the UI perspective that is causing this. The issue however is I can't replicate this.

[PartialVolume]

It doesn't only occur when switching servers, see method 2 in my description of how to reproduce the bug. Just viewing a liveview in landscape also triggers the bug.

[pliablepixels]

Okay and all of this also goes away if you take away the <span> completely right?

[PartialVolume]

Yes

[PartialVolume]

Although I do like those little info labels, would be a shame if they were removed

[pliablepixels]

Agree - I'm not going to remove them. I'll experiment with some other ways

[PartialVolume]

Just checking, but have you a device running 5.1 ?
If you have I'm just wondering if screen size has anything to do with it. On the UMI Fair the screen is smaller than the HTC M8, on the UMI if I scroll the side menu so Montage is at the top, the bottom visible item in the menu is help, do you see more items than that ?

[pliablepixels]

Yes - the device I am using is a Moto E running 5.1

[pliablepixels]

<ion-side-menus delegate-handle="sideMenu" ng-cloak> --> does it help if you remove the delegate-handle part and keep side="left" ?

[PartialVolume]

I'll try removing delegate handle next but finishing off the other fix first.

The absolute minimum that fixes this is simply wrapping <ion-list> with
<ion-scroll style="height:100%">

As height is now 100% there is no white band at the bottom of the side menu as with 95%. It's also not necessary to change <ion-side-menu> by adding side="left"

Menus do not lock which ever method i use to trigger the bug (single server, liveview in landscape, or multi server switching).

[pliablepixels]

That looks good. Yes please see if removing delegate handle helps. Please do a PR as well once you conclude on this. Thanks!

[PartialVolume]

Starting with a fresh download of the shrinking header branch.

Changed <ion-side-menus delegate-handle="sideMenu" ng-cloak>
To <ion-side-menus ng-cloak>

Changed <ion-side-menu>
To <ion-side-menu side="left">

Using both single server liveview in landscape & switching servers both cause scroll to lock up with this change.

Just had a thought, can you try something for me ?. With your moto can you start zmN and hold it in landscape (do not turn it to portrait) check the menu scrolls, switch servers, keeping it in landscape click the three bars to bring in the side menu, check to see if it scrolls. Thanks

I just found a variation of method #2 for locking the scroll using liveview starting in landscape mode.

Start ZmNinja, holding the phone in landscape fashion.
Makesure the side menu is scrollable.
Click either montage or monitor and bring up a liveview.
Rotate the phone to portrait
Exit liveview using the expanding buttons
click the 3 bars to bring in the side menu
Check scroll, it's locked !

Check side menu, can no longer scroll.
With side menu still showing rotate phone to landscape and back to portrait, scroll now works.

[pliablepixels]

@PartialVolume - no lock for me in your modified case. I think now that you've brought it down to a minimal set of changes (which also looks logical to me), feel free to do a PR. I'll merge and test on my devices to make sure it doesn't cause any issues.

[PartialVolume]

@pliablepixels I've updated my local master, checked for your changes <ion-content has-header="true" mouse-wheel-scroll> , all good. Built and installed on my two Android devices. All seems to be working fine. No scroll lockups. I can see a very thin scroll bar down the right side of the side menu but it doesn't look too bad, although I still think there is an option to hide that. Slight user type issue with the shrinking headers but I'll document that in a different thread. I'll test over the next couple of days.

[pliablepixels]

I am unfortunately going to have to revert this change. Its causing scrolling issues on iOS where the menu does not scroll enough for the last item to be visible.

[PartialVolume]

That's a shame, setting the percentage to 95% doesn't improve things ?

On 12 Oct 2016 00:57, "Pliable Pixels" [email protected] wrote:

I am unfortunately going to have to revert this change. Its causing
scrolling issues on iOS where the menu does not scroll enough for the last
item to be visible.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pliablepixels/zmNinja/issues/337#issuecomment-253081315,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVD9EdJq3WqMfD90ALpKBcLL49hXubqVks5qzCJngaJpZM4KF5BU
.

[pliablepixels]

Not sure - I am trying to clean up/implement some other features - I'll get back to this after that. I think we are close to a compatible solution - just that I have some other high priority stuff to do for now. I'll put it back after that and investigate.

[pliablepixels]

@PartialVolume - can you please update and check if the new display resolves this issue - I've taken the float out

[PartialVolume]

@pliablepixels I'll check it out later this evening.

[pliablepixels]

Thanks. Also I just made a commit pliablepixels@62f8844 - let me know if that solves overlapping windows. I took a hammer to the problem.

[PartialVolume]

I thought the Montage was loading real fast & packed out correctly . I'll test the montage some more.

Bad news re the menu. Always locking now as per the method I use to make this bug show. I took out the <span class="item-note" style="width:90px"> {{$root.getProfileName();}} </span>
but it still locks. Also did you mean to put {{'kMenuZMSettings'|translate}} inside the span. You've not done that on the other menu entries. I took it outside the span but the menus still lock. I've been looking for other changes to index.html compared to earlier versions but have not spotted any yet.

                    `<span class=" item-icon-left">
                        <i class="icon ion-person"></i>
                     {{'kMenuZMSettings'|translate}}
                        <span class="item-note" style="width:90px">
                            {{$root.getProfileName();}}
                        </span>
                    </span>`

[PartialVolume]

Changed <!--<ion-content has-header="true" mouse-wheel-scroll>--> to <ion-content has-header="true"> menu still locks.

[pliablepixels]

hmm, so then its not the float that was causing the issue, then

[PartialVolume]

Doesn't look like it. But on the earlier code taking out the span fixed it. Very odd. I'm assuming if I put the <ion-scroll scrollbar-y="false" style="height:100%" > back in it would be ok. Maybe I need to go back to 1.2.24 or earlier and try and figure it out again.

[pliablepixels]

is this resolved / can we close?

[PartialVolume]

Hi, Yes, I think you can probably close it, I tend to use a HTC M10 (Android 6) so don't have the ability to test on earlier versions. Works fine on the M10 Regards Nick On 7 Feb 2017 10:37 a.m., "Pliable Pixels" <[email protected]> wrote: is this resolved / can we close? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/pliablepixels/zmNinja/issues/337#issuecomment-277961249>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVD9EUM0dzKQq7GmhjSeyR50Vbx3BIQgks5raEl9gaJpZM4KF5BU> .