Listbox overflow clipped on iOS

[rwestlund]

Description

Using paper-dropdown-menu in a dialog with paper-dialog-scrollable causes the listbox to be clipped on iOS. The issue is only present when paper-dialog-scrollable is used.

Expected outcome

The listbox overflow should be visible like it is on other devices.

Actual outcome

The overflow is clipped.

Live Demo

https://jsbin.com/qoqalurexa/1/edit?html,console,output

Steps to reproduce

See demo.

Browsers Affected

• Chrome on iOS 10.3
• Firefox
• Safari on iOS 10.3
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[deluxestyle]

is someone working on that?

[madrover]

Same issue here, found on Home Assistant.
It can be reproduced both on Safari on iPad and Iphone and the native Home Assistant app, which I guess uses the same Safari engine.

[TypQxQ]

Is anyone working on this?
This makes HA quite useless on iOS for me when I want to control the temperatrure.

[valdrinkoshi]

This is similar to #73

<paper-dialog-scrollable> creates its own stacking context in this line:

paper-dialog-scrollable/paper-dialog-scrollable.html

Line 105 in 002f84f

@apply --layout-scroll;

That mixin sets -webkit-overflow-scrolling: touch (see source), and that property creates a new stacking context on iOs.

A stacking context will trap all content within it, e.g. see this example http://jsbin.com/kuboqa/1/edit?html,output

This is not really fixable as it's a composition problem, sorry :/

One way could be to reset -webkit-overflow-scrolling: auto through the --paper-dialog-scrollable mixin when the paper-dropdown-menu is opened, but that's a bit hacky, and most likely you'd still have the dropdown content clipped by <paper-dialog> (which sets its own stacking context as well through position: fixed and z-index

<!-- my-element template -->
<style>
  paper-dialog-scrollable[no-overflow-scrolling] {
    --paper-dialog-scrollable: {
      -webkit-overflow-scrolling: auto
    };
  }
</style>
<paper-dialog-scrollable no-overflow-scrolling$="[[_dropdownOpened]]">
   <paper-dropdown-menu opened="{{_dropdownOpened}}">

[deluxestyle]

Seems to be fixed in home assitant