Элементы фрейма CSS Safari, выходящие за пределы, содержащие

Question

EDIT: Код ниже не является наиболее читаемым из-за того, что он построен с использованием php. Я включил кодировщик с образцами данных и более читаемый HTML, чтобы более четко продемонстрировать проблему, которая может быть найдена: codepen.io/anon/pen/PbeGya здесь.

Я пытаюсь создать заголовок flexbox для веб-сайта, над которым я работаю. Я получил это до такой степени, что он прекрасно работает в chrome и firefox, однако, когда я просматриваю его в сафари, элементы падают на дно их содержащего div и находятся за пределами фона заголовка.

Я прилагаю следующие скриншоты, чтобы показать проблему:

Вот как это должно выглядеть, и как он будет выглядеть на хром и светлячок: enter image description here

А вот как он ведет себя на сафари: enter image description here

Вот соответствующий код как можно ближе. Имейте в виду, что я не эксперт по css каким-либо образом, и за последние несколько часов я много перепутал с кодом, пытаясь понять, что происходит.

<div id="uberbar"> 
<div class="menu-centering"> 
    <div class="grid"> 
     <div class="grid__row"> 
      <div class="grid_row"> 
       <a href="/" id="logopic"> 
        <img src="redacted"> 
       </a> 
       <a href="/" id="logopic-scroll"> 
        <img src="redacted"> 
       </a> 
      </div> 
      <?php 
      $html_construction = ""; 
      $array_menu = wp_get_nav_menu_items('Test'); 
      foreach ($array_menu as $array_item) { 
       if($array_item->menu_item_parent == 0) { 
        $html_construction .= ("<div class='grid__item'> <a href='" . $array_item->url . "'>" . $array_item->title . "</a>"); 
        if(is_null(get_nav_menu_item_children($array_item->ID, $array_menu)) == false) { 
         $children_array = get_nav_menu_item_children($array_item->ID, $array_menu); 
         $html_construction .= "<div class='dropdown-content'>"; 
         foreach ($children_array as $child) { 
          $html_construction .= ("<a href='" . $child->url . "'>" . $child->title . "</a>"); 
         }; 
         $html_construction .= "</div></div>"; 
        } else { 
         $html_construction .= "</div>"; 
        }; 
       }; 
      }; 
      echo $html_construction; 
      ?> 
      <div class="grid__item demo-menu"><a href="#bottom">Free Demo</a></div>      
     </div> 
    </div> 
</div> 

И CSS:

#uberbar { 
 
    background:#505050; 
 
    padding:10px 0px; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    z-index:2000; 
 
    width:100%; 
 
    height: 5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.menu-centering { 
 
    max-width: 1300px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: auto; 
 
    margin-bottom:auto; 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -o-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
#uberbar a { 
 
    color:white; 
 

 
    } 
 
    #logopic { 
 
    margin-right: 15em; 
 
    } 
 

 
    #logopic-scroll { 
 
    display:none; 
 
    padding-top: 10px; 
 
    margin-right: 15em; 
 
    } 
 

 
    .grid { 
 
} 
 

 
.grid__row { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.grid__item { 
 
    flex: 1; 
 
    padding: 12px; 
 
    max-width: 20%; 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 

 
} 
 

 
.grid__item:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 

 
@media all and (min-width: 480px) { 
 

 
    .grid__row--sm { 
 
    flex-direction: row; 
 
    } 
 

 
} 
 

 
@media all and (min-width: 720px) { 
 

 
    .grid__row--md { 
 
    flex-direction: row; 
 
    } 
 

 
} 
 

 
@media all and (min-width: 960px) { 
 

 
    .grid__row--lg { 
 
    flex-direction: row; 
 
    } 
 

 
} 
 

 

 
.demo-menu { 
 
    background-color: #27a8df; 
 
    border-radius: 15px; 
 
    z-index: 1; 
 
    } 
 

 
.demo-menu-small { 
 
    background-color: transparent; 
 
    color: #27a8df; 
 
} 
 

 
#uberbar .demo-menu-small a { 
 
    color: #27a8df; 
 
    font-weight: 400; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    min-width: 160px; 
 
    } 
 

 
    .dropdown-content a { 
 
    background-color: #505050; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    max-width: 200px; 
 

 
} 
 

 
    .dropdown-content a:hover { 
 
    background-color: #898989; 
 
} 
 

 
_::-webkit-full-page-media, _:future, :root .safari_only { 
 

 
.grid__row { 
 
    padding-bottom: 10px; 
 
} 
 

 
} 
 
.mobile-header-solution { 
 
    display: none; 
 
} 
 

 
@media all and (max-width : 768px) { 
 
    #uberbar { 
 
    display:none; 
 
    } 
 
    .mobile-header-solution { 
 
    display: block; 
 
    } 
 
} 
 

 
@media all and (max-width : 1300px) { 
 
    #logopic, #logopic-scroll { 
 
    margin-right: 10em; 
 
    margin-left: 3em; 
 
    } 
 

 
    #logopic-scroll { 
 
    border: solid 1px red; 
 
    } 
 

 
    .grid__item { 
 
    max-width: 12%; 
 
    } 
 
}

Пожалуйста, мне точку в правильном направлении, я в настоящее время в течение нескольких часов, глядя на сафари конкретных CSS ошибок особенно связанных с flexboxes, и я не могу найти ничего, что, по моему мнению, может быть причиной.

Answer 1

Если вы собираетесь использовать flexbox, используйте flexbox. Вся эта вершина: 50% перевод (Y): - 50% пытается сделать вертикальное центрирование, которое может сделать flexbox.

Удалить, что с вашей .menu-центрирования, и дать .menu центрирования следующее:

display: flex; 
justify-content: space-between; 
align-items: center; 
height: 100%; 

И затем дать Содержащий .grid ширина: 100%;

Это должно решить вашу проблему.