I have a very very weird bug I am debugging right now.
I am trying out Material Design Lite: http://www.getmdl.io/components/index.html#layout-section
But whenever I just COPY/PASTE the "Fixed Header" example from their official CodePen (http://codepen.io/anon/pen/WvaKjK) it looks different in my browser:
And this is the whole HTML that is used:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
</body>
</html>
If you compare the two headers, you see that the icon in the top left is not in place. Well the queston arises for the why.
Because I use the same code on my machine, which makes the icon appear out of place, but whenever I copy/paste the code from my browser by f.e. cmd+U to jsfiddle or codepen, I get the Icon placed right.
See here:
http://codepen.io/anon/pen/LVgBzZ
It's not a browser problem, since the same problem appears also in Firefox, Chrome, Chrome Canary and also Android Chrome. I uploaded the same HTML here, which is displayed wrongly:
http://temp.leavingblue.com/5.html
I ran the code on my local machine on windows (wamp) and on a linux virtual machine (homestead).
TL;DR:
Same HTML looks fine in Official getmdl.io site, codepen, jsfiddle, but looks weird when I recreate it on my own HTML file.
How to reproduce the error
Go to
- http://temp.leavingblue.com/5.html,
- Cmd + U
- Copy/Paste all to Codepen.io
- Look at differences
Can anyone reproduce the error? Also has anyone an explanation for this behaviour?