ul導航中谷歌瀏覽器中不穩定的CSS3轉換

我正在創建帶有轉換的2級導航。我面臨的問題是，當下拉導航展開時，它會晃動整個菜單中的文字。我已經創建了一個codepen示例。當我在轉換服務導航項目上的向下箭頭時進行廣告轉換時，問題似乎就會發生。如果我從.nav類刪除垂直對齊，它會減少抖動，但它仍然存在。ul導航中谷歌瀏覽器中不穩定的CSS3轉換

Code Pen link

.header { 
    background: #0c121f; 
    width: 100%; 
    color: #fff; 
} 

.header:before, .header:after { 
    content: ""; 
    display: table; 
} 

.header:after { 
    clear: both; 
} 

.header-banner { 
    float: left; 
    position: relative; 
    vertical-align: bottom; 
} 

.header-logo, .header-tel { 
    display: block; 
} 

.header-tel { 
    height: 1.5rem; 
} 

@media only screen and (min-height: 768px) { 
    .header-banner { 
    height: 9.375rem; 
    width: 20%; 
    } 
} 
[class^="ico-"]:before, [class*=" ico-"]:before, [class^="ico-"]:after, [class*=" ico-"]:after { 
    font-family: ico; 
    font-size: 0.9375rem; 
    line-height: 0.9375rem; 
    font-style: normal; 
    margin-right: 0.9375rem; 
} 

.ico-downarrow:before { 
    content: "\e007"; 
} 

.ico-downarrow { 
    -webkit-transition: -webkit-transform 0.5s ease-in-out; 
    -moz-transition: -moz-transform 0.5s ease-in-out; 
    transition: transform 0.5s ease-in-out; 
} 
.ico-downarrow:before { 
    position: absolute; 
    left: 19px; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.nav-wrap { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    background: #ccc; 
} 

.nav, .sub-nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.nav { 
    z-index: 1000; 
} 
.nav a { 
    display: block; 
    color: #fff; 
    white-space: nowrap; 
    font-size: 0.9375rem; 
    -webkit-font-smoothing: subpixel-antialiased; 
    line-height: 0.9375rem; 
    height: 3.3125rem; 
    padding: 15px; 
} 

.nav-item { 
    position: relative; 
} 

.sub-nav { 
    overflow: hidden; 
    background: #394356; 
    max-height: 0; 
    -webkit-transition: max-height 0.3s ease-in-out; 
    -moz-transition: max-height 0.3s ease-in-out; 
    transition: max-height 0.3s ease-in-out; 
} 

.active a { 
    color: #fff; 
} 

@media only screen and (min-width: 40.063em) { 
    .nav-wrap { 
    height: 9.375rem; 
    display: block; 
    float: left; 
    } 

    .nav { 
    position: relative; 
    width: 53.125rem; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    } 

    .nav-item { 
    position: relative; 
    display: table-cell; 
    width: 1%; 
    } 
    .nav-item:hover { 
    background: #394356; 
    } 

    .sub-nav { 
    position: absolute; 
    top: 3.3125rem; 
    left: 0; 
    } 

    .sub-nav-item:hover { 
    background: #49566f; 
    } 

    .dropdown:hover .sub-nav { 
    max-height: 13.25rem; 
    } 
    .dropdown:hover .ico-downarrow { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
    } 
} 
.dropdown-toggle { 
    background: #2c3341; 
    position: absolute; 
    height: 3.3125rem; 
    width: 3.3125rem; 
    right: 0; 
    top: 0; 
}

我檢查IE和Mozilla正常工作。只是Chrome。請幫忙。

來源

2015-06-20 Andrius Solopovas

我有固定的我自己的問題，感謝您試用，如果有人做了。我只是使用不同的方法來垂直對齊導航。所以我認爲問題是如何使用chrome渲染變換（translateY（-50％））。

.nav { 
    height: $nav-item-height; 
    width: rem-calc(850); // 850px 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -($nav-item-height/2); // -26.5px 
    }

來源

2015-06-20 19:53:11

ul導航中谷歌瀏覽器中不穩定的CSS3轉換

回答

相關問題