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

• [x] Chrome on iOS 10.3
• [ ] Firefox
• [x] 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 https://github.com/PolymerElements/paper-dialog-scrollable/issues/73

<paper-dialog-scrollable> creates its own stacking context in this line: https://github.com/PolymerElements/paper-dialog-scrollable/blob/002f84fe19c88841bf109b6c4fae0b855c603a5c/paper-dialog-scrollable.html#L105

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