search

PolymerElements / paper-drawer-panel

A Material Design two-section responsive panel
https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel
25 stars 42 forks source link

Right drawer - graphical bug #142

Open OtherOfIce opened 8 years ago

OtherOfIce commented 8 years ago

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 commented 8 years ago

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.