Before marking this question as a duplicate, please take a look at this JS Fiddle: <https://jsfiddle.net/751cg8d1/10/>

HTML:

```html
 <div class="opLandingContainer">
      <ul class="opWelcomeNavBar affix">
        <li class="opWelcomeNavBarLogo" >
          <a href="/">
            <img class="ui image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
          </a>
        </li>
        <li style="right: 0; position: absolute" class="opWelcomeNavBarItem nondropdown">
          <a style="padding-right: 0" href="/sign-up">Sign Up</a>
          <a href="/sign-in">Sign In</a>
        </li>
      </ul>
    </div>
```

CSS

```
.opWelcomeNavBarLogo {
    position:absolute;
    width:225px;
    display:inline-block;
 }
.opWelcomeNavBarLogo img {
    height: 68px;
}
@media(max-width:600px) {
    .opWelcomeNavBarLogo {
        width: 125px !important;
    }
    .opWelcomeNavBarLogo img {
        height: 38px !important;
    }
}
.opWelcomeNavBar.affix a {
    color:black;
}
.opWelcomeNavBar.affix {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.opWelcomeNavBar{
    border:0;
    top:0;
    right:0;
    left:0;
    height:90px;
    z-index:1;
    margin:0;
    position:fixed;
    list-style-type: none;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    /*border: 0 none;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}
.opWelcomeNavBar a:hover{
    color: #ababab;
    text-decoration:none;
}
.opWelcomeNavBar a {
    color:white;
    font-size:1.3em;
    text-decoration:none;
    height:50px;
    padding:15px;
    border:2px solid transparent;
}

```

The goal of this code is to vertically center some items in a container (in this case, some menu items in a top nav bar).

If you view the fiddle in Chrome, everything works correctly. However, in Safari 10, the items are not vertically centered. I have attempted to use every type of vendor prefix (which in this version of Safari shouldn't be necessary), but none of those changes seem to work. From what I have read, this version of Safari should fully support the flex positioning specification. I have also looked through the common flex bugs here: <https://github.com/philipwalton/flexbugs>, but none of these seem to apply to what I am seeing in this example.

Correct View in Chrome:

[![Correct View in Chrome](https://i.stack.imgur.com/CNRoZ.png)](https://i.stack.imgur.com/CNRoZ.png)

Incorrect View in Safari 10:

[![enter image description here](https://i.stack.imgur.com/3m5Ri.png)](https://i.stack.imgur.com/3m5Ri.png)