Chrome CSS 3 전환 매끄럽지 않음

Chrome CSS 3 전환 매끄럽지 않음

안녕하세요. 새로운 사이트를 위한 사이트 디자인을 하고 있고 홈페이지에는 CSS3 전환을 이용한 플라이업 메뉴들이 있습니다.

----------로 이동하여 크롬으로 표시된 홈페이지의 "착한 메뉴", "또 다른 멋진 메뉴" 등의 링크를 보면, 마우스를 갖다 대면 플라이업이 나타나지만 전환이 원활하지 않고 메뉴 라벨이 위아래로 진동하는 것처럼 나타납니다.아래에 CSS를 포함시켰으나 사이트에서 style.css 파일로 제공됩니다(관련 부품은 1905년 라인에서 시작).

이것은 크롬에서만 가능합니다. 사파리와 파이어폭스는 잘 작동하고 IE는...지금 당장은 그 얘기는 하지 말자구요...

.home #site-navigation .menu-main-menu-container .trait-box { 
    width: 100%; 
}

.home .main-navigation ul,
.home .main-navigation {
    margin: none;
    border: none;
}

.home .main-navigation ul li {
    border: none;
}

.home .main-navigation ul li a {
    margin-left: 0;
    margin-right: 0;
}

.home .trait-box { 
    margin-top: 480px; 
    display: block; 
    text-align: center; 
    height: 126px; 
    position: relative; 
    color: #4e4e4d; 
    text-decoration: none !important;
}
.home .trait-box h4 { 
    position: absolute;
    bottom: 35px; 
    width: 90%; 
    font-size: 16px;
    font-size: 1.14285714rem;
    line-height: 20px;
    line-height: 1.25;
    font-family: 'ProximaNovaSemibold', Arial, Helvetica;
    font-weight: normal;
    color: #D06F4A;
    margin-left: 5%;
}

.home .trait-box figure { 
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    opacity: 0;
}
.home .trait-box figure img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
}
.home .trait-box dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
    position: absolute;
    top: 0px;
}

.home .trait-box.main-menu-orange dl {
    border-top-color: #D06F4A;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-teal dl {
    border-top-color: #405C69;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-blue dl {
    border-top-color: #5E7599;
    border-top-style: solid;
    border-top-width: 12px;
}
.home .trait-box.main-menu-green dl {
    border-top-color: #A9B800;
    border-top-style: solid;
    border-top-width: 12px;
}

.home .trait-box dd { 
    font-size: 15px;
    font-size: 1.07142857rem;
    line-height: 19px;
    line-height: 1.266666667;
    margin-bottom: 12px;
    font-family: Georgia, Times, 'Times New Roman', serif;
    color: #595959;
    padding: 0 10px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    margin-top: 20px;
}

.home .trait-box dd span {
    white-space: nowrap;
    display: block;
    width: 70%;
    padding: 3px 0;
    margin: 38px auto 40px;
    background: #D06F4A;
    font-size: 15px;
    font-size: 1.07142857rem;
    font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 5px 10px;
    padding-top: 12px;
    color: #ffffff;
    opacity: 0;
}

.home .trait-box.main-menu-orange dd span {
    background-color: #D06F4A;
}

.home .trait-box.main-menu-blue dd span {
    background-color: #5E7599;
}

.home .trait-box.main-menu-teal dd span {
    background-color: #405C69;
}

.home .trait-box.main-menu-green dd span {
    background-color: #A9B800;
}

.home .trait-box,
.trait-box figure,
.trait-box dd,
.trait-box dl,
.trait-box dd span {
    -webkit-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98);
    -webkit-transition-delay: 0;
    -moz-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    -o-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
    transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
}

.home .trait-box:hover,
.trait-box.expanded {
    margin-top: 0;
    padding-top: 400px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    background: white;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure {
    height: 184px;
    opacity: 1;
}

.home .trait-box:hover dl {
    margin-top: 184px;
}

.home .trait-box:hover dd,
.trait-box.expanded dd { 
    height: 170px;
    opacity: 1;
}

.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    opacity: 1;
}

.home .trait-box:hover dd span:hover,
.trait-box.expanded dd span:hover {

}

.home .trait-box:hover,
.trait-box.expanded {
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover figure, 
.trait-box.expanded figure { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dl, 
.trait-box.expanded dl { 
    -webkit-transition-duration: 225ms;
    -moz-transition-duration: 225ms;
    -o-transition-duration: 225ms;
    transition-duration: 225ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.home .trait-box:hover dd,
.trait-box.expanded dd {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
    -webkit-transition-duration: 540ms;
    -moz-transition-duration: 540ms;
    -o-transition-duration: 540ms;
    transition-duration: 540ms;
    -webkit-transition-delay: 1100ms;
    -moz-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    transition-delay: 1100ms;
}

비용이 많이 들고 각 애니메이션 단계에서 레이아웃을 변경하여 육중함과 초조함을 유발하는 브라우저 리플로우를 유발합니다.

이 문제를 해결하려면 애니메이션 요소에 절대 위치 지정을 적용해야 하며 CSS에 이를 추가하면 시작할 수 있습니다.

.home .main-navigation ul {
  position: relative;
  height: 180px;
}

.home .main-navigation ul li {
  position: absolute;
  display: block;
}

.home .main-navigation ul li:nth-child(1) { left: 0;}
.home .main-navigation ul li:nth-child(2) { left: 25%;}
.home .main-navigation ul li:nth-child(3) { left: 50%;}
.home .main-navigation ul li:nth-child(4) { left: 75%;}

이것은 단지 시작점일 뿐입니다. 절대 위치 지정으로 요소를 올바르게 표시하려면 CSS를 더 많이 작성해야 합니다.

우선 메뉴가 매끈매끈해 보인다고 말해야겠습니다.그걸 프로젝트에 사용할 수도 있습니다.어떤 WP 테마를 사용하고 계십니까?정말 멋집니다!

진지하게 말하자면, CSS 애니메이션은 Chrome이 그것들을 렌더링할 때 버그를 일으키는 것처럼 보입니다.두 가지 해결책이 있습니다(두 가지 모두 작업이 필요합니다).

1.미리 제작된 CSS 애니메이션이 Chrome에서 더 잘 만들어지고 안정적인지 확인하려면 animate.css를 사용합니다.http://daneden.me/animate/

2.jQuery로 메뉴를 애니메이션으로 만들어 보는 것도 안정적인 해결책이 될 것입니다.

언급URL : https://stackoverflow.com/questions/17754561/chrome-css-3-transition-not-smooth