Flashing when close right sidebar menu issue

ionic-v1
1

I’m trying to add action menu on the right side. It was flashing left menu in right menu when I toggle or swipe to close right side bar.

<side-menus>
  <pane side-menu-content>

  <!-- Header -->
  <header class="bar bar-header bar-positive">
    <button class="button button-icon" ng-click="toggleMainMenu()">
      <i class="icon ion-navicon"></i>
    </button>
    <button class="button button-icon" ng-click="toggleActionMenu()">
      <i class="icon ion-more"></i>
    </button>
  </header>

  <!-- Content -->
  <content has-header="true">
  </content>

</pane>

<!-- Left menu -->
<side-menu side="left">
  <content has-header="false" scroll="false">
    <div class="list menu-list">
      <a class="item item-avatar" href="#">
        <img src="./img/barrett.jpg">
        <h2>John Doe</h2>
      </a>

      <a class="item item-icon-left" href="#">
        <i class="icon ion-home"></i>
        My Tenancy Detail
      </a>

      <a class="item item-icon-left" href="#">
        <i class="icon ion-chatbubbles"></i>
        Inbox
        <span class="badge badge-assertive">2</span>
      </a>

    </div>
  </content>
</side-menu>

<!-- Left menu -->
<side-menu side="right">
  <content has-header="false" scroll="true">
    <div class="list menu-list">
      <div class="item item-divider">
        Actions
      </div>
      <a class="item item-icon-left" href="#">
        <i class="icon ion-help-circled"></i>
        Raise an Issue
      </a>
      <a class="item item-icon-left" href="#">
        <i class="icon ion-chatbubble"></i>
        Post Message
      </a>
    </div>
  </content>
</side-menu>

2

What Android version were you emulating? I created an issue here: https://github.com/driftyco/ionic/issues/556

3

I ran emulator with Android 4.3. Also happen in browser.

4

I’m also having this issue. I’m trying to back-out and see where it originates from. It might be poor CSS layout structure. Will report back if I come across a cause/solution. And like your case, it occurs only when closing the right menu.

5

@shinejikids I can say conclusively it’s not caused by poorly structured CSS. Not sure the cause, backing out to my oldest version actually reveals the problem was present then. I did notice however, that the issue has been exacerbated, as in flickering multiple times, with the more complex version which has more elements on the page. Could this be the DOM being rewritten? I’m assuming it’s related to performance, possibly due to a recent version of ionic. Have you tried an earlier version of the framework? I’m going to now, will report back.

*So it looks like the left menu that is flickering/flashing in to view when you open/close the right menu. From your screenshot, that appears to be the case as well.

*Running in browser and sideloading on to my Nexus 5, problem is the same on both

6

Hopefully this is fixed now in the nightly build. What was happening is that it changes the z-index of which menu should be on top, and when it was closed it set it so the left menu was on top. But I changed it so that when it closes it leaves the z-indexes to what they current were so the flash doesn’t happen. Please let me know if the nightly build fixes your issues, thanks.
http://code.ionicframework.com/#nightly