search

googlearchive / core-toolbar

Basic toolbar
7 stars 10 forks source link

Inversion of class="bottom" and class="top" interpretation on Safari #21

Closed ghost closed 9 years ago

ghost commented 9 years ago

When creating a core-toolbar on safari (tested on two different 8* series), nested elements appear far below the toolbar (where they would appear if the toolbar was declared tall). This code:

  1 <html>
  2         <head>
  3                 <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  4                 <meta charset="utf-8">
  5                 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  6                 <meta name="apple-mobile-web-app-capable" content="yes">
  7                 <meta name="mobile-web-app-capable" content="yes">
  8                 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9                 <link rel="import" href="imports.html">
 10         </head>
 11         <body fullbleed layout vertical>
 12                 <core-toolbar>
 13                         <core-icon-button  icon="menu"></core-icon-button>
 14                         <div >My App</div>
 15                         <span  flex></span>
 16                         <core-icon-button  icon="search"></core-icon-button>
 17                 </core-toolbar>
 18         </body>
 19 </html>

Renders, on Safari:

screen shot 2015-01-07 at 02 35 37

Adding class="bottom"(not "top"...) solves the problem. Looks like the two properties value are inverted in a way.

frankiefu commented 9 years ago

You are missing the doctype declaration on the page.

<!doctype html>

See this jsbin: http://jsbin.com/komoroduxu/1/edit?html,output

ghost commented 9 years ago

My bad, thanks a lot.

mafiuss commented 9 years ago

I don't think this is related to the doctype declaration, I have the same problem and my doctype is fine, if I replace core-toolbar element with an .core-header class it works inside a core-header-panel, otherwise safari both in desktop and ios won't work, also chrome mobile breaks in ios. Using core-toolbar screen shot 2015-02-27 at 2 22 22 pm

Using .core-header instead. (I removed the LANDING title intentionally)

screen shot 2015-02-27 at 2 23 14 pm

rubenstolk commented 9 years ago

Incredible, had the same issue because of having <!DOCTYPE > instead of <!doctype html>. Thanks!