Broken layout Safari8

Question

Hello! I’m starting at frontend and I’m having some problems with compiling code on different browsers. Developing a header and a Canvas style menu I came across the totally broken layout in Safari8. I used some css tags of --Webkit rendering engines and the like, but the problem persists.

Below is the layout in Chrome and the same in Safari besides code.

html,
body {
  margin: 0;
  width: 100vw;
  font-family: sans-serif;
}
header input#menu {
  display: none;
}
header .control {
  padding: 10px;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #cccccc;
}
header .control span {
  width: 30px;
  height: 4px;
  background: #cccccc;
  display: block;
}
.container {
  display: flex;
  width: 100%;
  padding: 10px 30px;
}
.navbar ul {
  list-style: none;
  padding-left: 0;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  text-decoration: none;
}
header {
  display: flex;
  width: 100vw;
  height: 60px;
  background-color: #333;
}
header .container {
  align-items: center;
  justify-content: space-between;
}
header .container div.logo {
  color: #cccccc;
}
#canvas {
  cursor: pointer;
  width: 300px;
  height: 100vh;
  background-color: #333;
  position: absolute;
}
#canvas nav.navbar {
  width: 100%;
  position: absolute;
  top: 0px;
}
#canvas nav.navbar ul li {
  display: flex;
  flex-direction: column;
}
#canvas nav.navbar ul li a.link {
  width: 80%;
  padding: 15px 30px;
  color: #cccccc;
  transition: all .1s linear;
}
#canvas nav.navbar ul li a.link:hover {
  background-color: #4d4d4d;
}

<header>
  <div class="container">
    <input type="checkbox" name="menu" id="menu">
    <label class="control" for="menu" id="btn-menu">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <div class="logo">Logo</div>
  </div>
</header>
<div id="canvas">
  <nav class="navbar">
    <ul>
      <li><a href="#" class="link">Home</a>
      </li>
      <li><a href="#" class="link">About</a>
      </li>
      <li><a href="#" class="link">Blog</a>
      </li>
      <li><a href="#" class="link">Contato</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

The measures vm require Safari10, recommend using normal measures, see http://caniuse.com/#search=vm

And safari8 also requires that the display: flex; use the prefix -webkit- (although I’m not even seeing the need for flex), I’d be like this anyway:

seletor {
    /*navegadores safari e chrome mais antigos*/
    display: -webkit-flex;
    -webkit-flex-direction: column;

    /*navegadores atualizados*/
    display: flex;
    flex-direction: column;
}

I recommend not to use vm, in your case vm nor seems necessary, px, em replace perfectly, even perhaps with width: 10%; get the result.

But if you still think you really need vm then see this answer has an alternative to the measures vm in jQuery:

• A: Pure CSS3 app style breaks when running on Android

Anyway using the prefix and width: 100% should solve, test please:

html, body {
  margin: 0;
  width: 100%; /*troquei o vm aqui*/
  font-family: sans-serif;
}
header input#menu {
  display: none;
}
header .control {
  padding: 10px;
  width: 30px;
  height: 20px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #cccccc;
  
  /*prefixos*/
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}
header .control span {
  width: 30px;
  height: 4px;
  background: #cccccc;
  display: block;
}
.container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 10px 30px;
}
.navbar ul {
  list-style: none;
  padding-left: 0;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  text-decoration: none;
}
header {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #333;
}
header .container {
  align-items: center;
  justify-content: space-between;
}
header .container div.logo {
  color: #cccccc;
}
#canvas {
  cursor: pointer;
  width: 300px;
  height: 100vh;
  background-color: #333;
  position: absolute;
}
#canvas nav.navbar {
  width: 100%;
  position: absolute;
  top: 0px;
}
#canvas nav.navbar ul li {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}
#canvas nav.navbar ul li a.link {
  width: 80%;
  padding: 15px 30px;
  color: #cccccc;
  transition: all .1s linear;
}
#canvas nav.navbar ul li a.link:hover {
  background-color: #4d4d4d;
}

<header>
  <div class="container">
    <input type="checkbox" name="menu" id="menu">
    <label class="control" for="menu" id="btn-menu">
      <span></span>
      <span></span>
      <span></span>
    </label>

    <div class="logo">Logo</div>
  </div>
</header>
<div id="canvas">
  <nav class="navbar">
    <ul>
      <li><a href="#" class="link">Home</a>
      </li>
      <li><a href="#" class="link">About</a>
      </li>
      <li><a href="#" class="link">Blog</a>
      </li>
      <li><a href="#" class="link">Contato</a>
      </li>
    </ul>
  </nav>
</div>