Right drawer - graphical bug

[OtherOfIce]

Description

Have an <a href=""> inside a right hand drawer, then change the visibility to visible. When trying to open the drawer (using a paper icon) on mobile a graphical bug occurs (about 1/2 the time).

<meta name="viewport" content="width=device-width,initial-scale=1">

<paper-drawer-panel right-drawer>
      <paper-header-panel main>
            <paper-toolbar style="background-color : #1f7a1f">
                  <paper-icon-button icon="menu" paper-drawer-toggle=""></paper-icon-button>
            </paper-toolbar>
      </paper-header-panel>
      <paper-header-panel  drawer>
            <a id="sidebar" href=""> turf</a>
      </paper-header-panel>
</paper-drawer-panel>

        <script>document.getElementById("sidebar").style.visibility = "visible";</script>

EDIT: http://output.jsbin.com/tojobevopo Look at this using the chrome dev tools mobile view or on a phone.

[blasten]

Here's how to workaround it http://jsbin.com/lagowa/edit?html,output. The issue is caused by calling focus on an element too early on the transition of the drawer, basically when that element is off screen. On mobile, Chrome seems to bring that element into view which causes that bizarre effect.
You can also use app-layout which doesn't have this issue because focus is called at the end of the transition. e.g. Toggle device mode and try this on chrome.