Chrome CSS 3 전환이 부드럽 지 않음

안녕하세요. 새로운 사이트의 사이트 디자인 작업 중입니다. 홈페이지에는 CSS3 전환을 사용하는 일부 플라이업 메뉴가 있습니다.Chrome CSS 3 전환이 부드럽 지 않음

---------로 이동하여 크롬에있는 홈페이지의 '멋진 메뉴', '다른 멋진 메뉴'등의 링크를 클릭하면 플라이 업이 나타나지만 전환이 부드럽 지 않고 메뉴 레이블이 위아래로 진동하는 것처럼 보입니다. 아래 CSS를 포함 시켰지만 사이트의 style.css 파일에서 사용할 수 있습니다 (관련 부분은 1905 행부터 시작)

크롬에서만 사용할 수있는 Safari 및 Firefox는 잘 작동하며 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; 
}

출처

2013-07-19 dpegasusm

이전에 나는 작은 흔들림 (당신이 묘사하는 것처럼 "흔들 리기")에 빠져있었습니다. 내가 말할 수있는 것부터, CSS3 전환과 관련된 Chrome 관련 버그입니다. 또한 불투명도 속성에 애니메이션 효과를 적용하는 것이 가장 이상적이라고 생각합니다. 나는 그 문제를 해결할 수있는 방법을 찾지 못했습니다. 나는이 문제로 구글에있는 다른 사람들을 찾았지만 그들 중 누구도 해결책을 찾지 못했습니다. 아마 CSS3 대신 jQuery로 그냥 움직이는 것이 가장 좋습니다. – Ennui

너는 비싸고 각 애니메이션 단계의 레이아웃을 변경하여 갑작스럽고 불쾌감을 유발합니다.

는이 문제를 해결하려면, 당신은 얻을 것이다 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.

출처

2013-07-20 03:37:13 Duopixel

감사합니다! 나는 이것을 시도 할 것이다. – dpegasusm

그게 효과가! 감사! – dpegasusm

우선 메뉴가 매끄럽게 보입니다. 나는 그것을 프로젝트에 사용할 수있다. 어떤 WP 테마를 사용하고 있습니까? 그것은 굉장합니다!

CSS 애니메이션이 Chrome에서 렌더링 될 때 버그를 유발하는 것처럼 보입니다.

1. 미리 작성된 CSS 애니메이션이 Chrome에서 더 잘 만들어지고 안정적인지 확인하려면 animate.css를 사용하십시오 (두 가지 모두 약간의 작업이 필요합니다). http://daneden.me/animate/

2. 안정적인 해결책이 될 jQuery로 메뉴에 애니메이션을 적용하십시오.

출처

2013-07-20 01:04:27

그것은 내가 프로젝트를 위해 만들고있는 사용자 정의 빌드 테마입니다. 나는 그것을 완벽하게 반응하고 크로스 브라우저 호환성을 위해 노력하고있어, 오히려 jquery로 그것을 오버로드하지 않을 것이다. 만약 내가 할 필요가 없다면 css3와 똑같이 할 수있다. – dpegasusm

CSS는 실제로 어떻게되어야하는지 잘 들지만, 흔들림은 Chrome 특정 문제이므로 불행히도 @ennui가 말한 내용 만 말해야합니다. Chrome에서이 작업을 수행 할 수있는 유일한 방법은 jQuery입니다. 이것이 사이트의 유일한 jQuery 스크립트라면 과부하가 걸리지 않을 것입니다. 또한 속도면에서 WP Super Cache와 같은 캐시 플러그인을 사용하면 사이트를 빠르게 만들 수 있습니다. –

Chrome CSS 3 전환이 부드럽 지 않음

답변

관련 문제