search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

Menubar menu not visible on iOS #3833

Open gpsfl opened 2 years ago

gpsfl commented 2 years ago

Description

The three dots of a MenuBar should show a menu with the remaining items. This doesn't work on iOS if the MenuBar is inside a SplitLayout.

Expected outcome

Show a menu with the remaining items

Minimal reproducible example

See "Overflow" example: https://vaadin.com/docs/latest/components/menu-bar

Steps to reproduce

  1. Open https://vaadin.com/docs/latest/components/menu-bar on an iPhone / iPad
  2. Goto the "Overflow" section
  3. Press on the three dots -> It will gray out the site but not show a menu

Note: After resizing the split layout once the menu will work again

Environment

Vaadin version(s): 23.2 OS: iOS 15.6.1

Browsers

Safari on iOS

knoobie commented 2 years ago

@gpsfl Is your own application affected or just the docs? The docs issue was also reported here: https://github.com/vaadin/web-components/issues/3274

gpsfl commented 2 years ago

@knoobie Yes, this is also happens in our application. Whenever you put a MenuBar into a SplitLayout it'll break on iOS. It seems to be possible to work around this issue by giving the MenuBar a fixed width using css (can be relative or absolute).

knoobie commented 2 years ago

@web-padawan înteresting note for the original/related ticket

olaf-2 commented 1 year ago

Same problem here with menu bar simply in a div with display flex Hilla 1.3.1 MacBook with macOS 11.7.2 Safari 16.2