search

googlearchive / core-toolbar

Basic toolbar
7 stars 10 forks source link

Empty bottomBar and middleBar still show up in Safari #25

Closed aliciatang closed 9 years ago

aliciatang commented 9 years ago

I used the following markup, it shows up properly in chrome but not in safari.

<core-toolbar>
      <core-icon-button icon="menu"></core-icon-button>
      <span flex>title</span>
      <core-icon-button icon="translate"></core-icon-button>
      <core-icon-button icon="mail"></core-icon-button>
</core-toolbar>

After inspect in safari, find that although there is no elements in side bottomBar and middleBar it still take places and result in topBar has a huge margin on top.

I think the buttomBar and middleBar should be added to the shadow dom only if the user intend to used or at least remain hidden when no children elements.

attilapeter commented 9 years ago

+1

frankiefu commented 9 years ago

It seems to work fine for me on Safari. https://gist.github.com/frankiefu/7e989e413a8febafd871

Do you have a testcase showing the issue?

attilapeter commented 9 years ago

Thanks, Frankie. It was my bad. Your gist file helped to identify the issue.

I could not see anything obvious until I realized that the <!doctype html> declaration was missing in my source. Safari ended up rendering a css without absolute positioning rule for the bottomBar and middleBar. These were defined as position: relative.

aliciatang commented 9 years ago

Thanks Frankie and attilapeter, Yes, I've tried to add the <!doctype html>, and it indeed solve the problem in sofari. Thanks a lot. Alicia