Ionic-framework: Shadow below ion-toolbar in sliding menu not displayed correctly

[carstenbaumhoegger]

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I'm using a sliding side menu in one of my apps. When I'm opening the App with an Android phone, the shadow below the ion-header doesn't show while the menu is sliding out and is only displayed when the menu is revealed completely.

Expected behavior:
The shadow is always visible in the sliding process.

Steps to reproduce:
Create an App with a sliding menu and open it in Chrome on Android.
I used a Nexus 5X with Android 7.1.2 and Chrome 56

Related code:
I used this code to generate the menu.

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>App title</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    ....
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Other information:

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

Cordova CLI: Not installed
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.4
Xcode version: Not installed

[jgw96]

Hello, thanks for opening an issue with us! Unfortunately i cannot reproduce this with our conf app demo which uses a sidemenu. I am testing this on a Nexus 6 running Android 7.1.1 with the latest stable chrome webview (56). Could you post a repo i could use to reproduce this?

[carstenbaumhoegger]

Hello @jgw96
I can reproduce this behavior with the Sidemenu-Starter sample!
Simply follow these steps:

• run the sample with ionic serve
• open Page 1
• open Page 2
• now you notice a small (few px wide) dark shadow below the toolbar of Page Two
• open the menu --> shadow only shows, when menu is completely revealed

I use the Nexus 5X with Android 7.1.2 and Chrome 56, but on Android 7.1.1 I had the same behavior a few days ago.

PS: I'm also experiencing this issue under Chrome on macOS 10.12!

I hope this description helps you to reproduce the issue!

Here are some screenshots:

notice the weird shadow in the top left below the toolbar

no shadow while revealing the menu

shadow appears when menu is completely revealed

[jgw96]

Ahh, i was misunderstanding which shadow you were talking about, sorry about that! Thanks for all the info and the screenshots. I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/6416.

[carstenbaumhoegger]

Alright! Sorry that I didn't find that issue by myself 🙈

[armenbadalyan]

I don't think these two issues are the same. 6416 is about the little shadow being shown in the corner of the screen. This issue is about the side menu border flickering. And I can still reproduce it.

[carstenbaumhoegger]

yes @armenbadalyan you are right.
I think these two bugs are connected somehow, but I described the shadow flickering and not the grey square appearing below the toolbar.

[renjit00]

ion-toolbar in sliding menu not displayed
Even i am facing the same issue in my chrome and Mobile device.how to fix issue, please lead to resolve the issue. anybody can give the replay means its very grateful..

[jlcasasg]

Hi! any solution for the shadow not displaying correctly in the menu?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.