Broken layout Safari8

Question

Broken layout Safari8

Navigation

#1 by (4 votes)

5

Hello! I'm starting in frontend and am having some problems with compiling code in different browsers. Developing a header and a Canvas style menu I came across the totally broken layout in Safari8. I used some css tags from render engines --webkit and the like, but the problem persists.

Below is the layout in Chrome and the same in Safari besides the 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>

css webkit safari

asked by anonymous 17.01.2017 / 20:46

1 answer

Get only numbers in an input that receives XX ml (example: 200ml) How do I know the time and date of a location with PHP?

score 4 · Accepted Answer

vm measures require Safari10, I recommend using standard measures, see link

And Safari8 also requires that display: flex; use the prefix -webkit- (although I can not even see the need for flex ), it would look something like this:

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

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

I recommend that you do not use vm , in this case vm does not seem necessary, px , em perfectly replace, maybe with width: 10%; achieve the result.

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

R: App style in pure CSS3 breaks while running on Android

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

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>