search

PolymerElements / paper-tabs

Material Design tabs
https://www.webcomponents.org/element/PolymerElements/paper-tabs
65 stars 52 forks source link

paper-tabs don't show correctly on iOS (or Safari?) when parent is flex #210

Open matttk opened 7 years ago

matttk commented 7 years ago

Description

If you have paper-tabs inside a container with flex-flow, align-items, and justify-content, the tabs will not work on iOS/Safari.

Expected outcome

Tabs should show and be clickable.

Actual outcome

Only the text of one tab is shown but it doesn't seem to be a tab even, since there is no underline. Clicking it seems to select the whole container, rather than just the tab.

Steps to reproduce

  1. Create a paper-tabs with at least two tabs.
  2. Set :host (the parent container) to display:flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start;
  3. Load the page and note that the tabs do not work.
  4. Try deleting flex-flow, align-items, justify-content and reloading; the tabs do work.

Browsers Affected

Work Around

Enclose the paper-tabs in a div.