모바일에서 볼 때 올빼미 회전 목마가 사라집니다.

올빼미 회전 목마 프레임 워크를 사용하고 있으며 모바일 뷰를 입력 할 때 왜 회전 목마가 사라지는 지 알 수없는 몇 가지 이유가 있습니다. 처음에는 불투명도가 그 불투명도와 관련이 있다는 것을 알아 냈습니다. 모바일 장치에서 회전 목마를 볼 때 회전 목마가 사라지는 원인이 조각 내에서 아무것도모바일에서 볼 때 올빼미 회전 목마가 사라집니다.

.owl-carousel .owl-wrapper:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
/* display none until init */ 
.owl-carousel{ 
    display: none; 
    position: relative; 
    /*width: 100%;*/ 
    -ms-touch-action: pan-y; 
} 
.owl-carousel .owl-wrapper{ 
    display: none; 
    position: relative; 
    -webkit-transform: translate3d(0px, 0px, 0px); 
} 
.owl-carousel .owl-wrapper-outer{ 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 
.owl-carousel .owl-wrapper-outer.autoHeight{ 
    -webkit-transition: height 500ms ease-in-out; 
    -moz-transition: height 500ms ease-in-out; 
    -ms-transition: height 500ms ease-in-out; 
    -o-transition: height 500ms ease-in-out; 
    transition: height 500ms ease-in-out; 
} 
.owl-carousel .owl-item{ 
    float: left; 
} 
.owl-controls .owl-page, 
.owl-controls .owl-buttons div{ 
    cursor: pointer; 
} 
.owl-controls { 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
/* mouse grab icon */ 
.grabbing { 
} 
/* fix */ 
.owl-carousel .owl-wrapper, 
.owl-carousel .owl-item{ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility:  hidden; 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
} 
/* 
* Owl Carousel CSS3 Transitions 
* v1.3.2 
*/ 
.owl-origin { 
    -webkit-perspective: 1200px; 
    -webkit-perspective-origin-x : 50%; 
    -webkit-perspective-origin-y : 50%; 
    -moz-perspective : 1200px; 
    -moz-perspective-origin-x : 50%; 
    -moz-perspective-origin-y : 50%; 
    perspective : 1200px; 
} 
/* fade */ 
.owl-fade-out { 
    z-index: 10; 
    -webkit-animation: fadeOut .7s both ease; 
    -moz-animation: fadeOut .7s both ease; 
    animation: fadeOut .7s both ease; 
} 
.owl-fade-in { 
    -webkit-animation: fadeIn .7s both ease; 
    -moz-animation: fadeIn .7s both ease; 
    animation: fadeIn .7s both ease; 
} 
/* backSlide */ 
.owl-backSlide-out { 
    -webkit-animation: backSlideOut 1s both ease; 
    -moz-animation: backSlideOut 1s both ease; 
    animation: backSlideOut 1s both ease; 
} 
.owl-backSlide-in { 
    -webkit-animation: backSlideIn 1s both ease; 
    -moz-animation: backSlideIn 1s both ease; 
    animation: backSlideIn 1s both ease; 
} 
/* goDown */ 
.owl-goDown-out { 
    -webkit-animation: scaleToFade .7s ease both; 
    -moz-animation: scaleToFade .7s ease both; 
    animation: scaleToFade .7s ease both; 
} 
.owl-goDown-in { 
    -webkit-animation: goDown .6s ease both; 
    -moz-animation: goDown .6s ease both; 
    animation: goDown .6s ease both; 
} 
/* scaleUp */ 
.owl-fadeUp-in { 
    -webkit-animation: scaleUpFrom .5s ease both; 
    -moz-animation: scaleUpFrom .5s ease both; 
    animation: scaleUpFrom .5s ease both; 
} 
.owl-fadeUp-out { 
    -webkit-animation: scaleUpTo .5s ease both; 
    -moz-animation: scaleUpTo .5s ease both; 
    animation: scaleUpTo .5s ease both; 
} 
/* Keyframes */ 
/*empty*/ 
@-webkit-keyframes empty { 
    0% {opacity: 1} 
} 
@-moz-keyframes empty { 
    0% {opacity: 1} 
} 
@keyframes empty { 
    0% {opacity: 1} 
} 
@-webkit-keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:1; } 
} 
@-moz-keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:1; } 
} 
@keyframes fadeIn { 
    0% { opacity:0; } 
    100% { opacity:1; } 
} 
@-webkit-keyframes fadeOut { 
    0% { opacity:1; } 
    100% { opacity:0; } 
} 
@-moz-keyframes fadeOut { 
    0% { opacity:1; } 
    100% { opacity:0; } 
} 
@keyframes fadeOut { 
    0% { opacity:1; } 
    100% { opacity:0; } 
} 
@-webkit-keyframes backSlideOut { 
    25% { opacity: .5; -webkit-transform: translateZ(-500px); } 
    75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 
    100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 
} 
@-moz-keyframes backSlideOut { 
    25% { opacity: .5; -moz-transform: translateZ(-500px); } 
    75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 
    100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 
} 
@keyframes backSlideOut { 
    25% { opacity: .5; transform: translateZ(-500px); } 
    75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 
    100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 
} 
@-webkit-keyframes backSlideIn { 
    0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 
    75% { opacity: .5; -webkit-transform: translateZ(-500px); } 
    100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } 
} 
@-moz-keyframes backSlideIn { 
    0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 
    75% { opacity: .5; -moz-transform: translateZ(-500px); } 
    100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } 
} 
@keyframes backSlideIn { 
    0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 
    75% { opacity: .5; transform: translateZ(-500px); } 
    100% { opacity: 1; transform: translateZ(0) translateX(0); } 
} 
@-webkit-keyframes scaleToFade { 
    to { opacity: 0; -webkit-transform: scale(.8); } 
} 
@-moz-keyframes scaleToFade { 
    to { opacity: 0; -moz-transform: scale(.8); } 
} 
@keyframes scaleToFade { 
    to { opacity: 0; transform: scale(.8); } 
} 
@-webkit-keyframes goDown { 
    from { -webkit-transform: translateY(-100%); } 
} 
@-moz-keyframes goDown { 
    from { -moz-transform: translateY(-100%); } 
} 
@keyframes goDown { 
    from { transform: translateY(-100%); } 
} 
@-webkit-keyframes scaleUpFrom { 
    from { opacity: 0; -webkit-transform: scale(1.5); } 
} 
@-moz-keyframes scaleUpFrom { 
    from { opacity: 0; -moz-transform: scale(1.5); } 
} 
@keyframes scaleUpFrom { 
    from { opacity: 0; transform: scale(1.5); } 
} 
@-webkit-keyframes scaleUpTo { 
    to { opacity: 0; -webkit-transform: scale(1.5); } 
} 
@-moz-keyframes scaleUpTo { 
    to { opacity: 0; -moz-transform: scale(1.5); } 
} 
@keyframes scaleUpTo { 
    to { opacity: 0; transform: scale(1.5); } 
}

있습니까 : 여기가 문제를 일으키는 생각 니펫은? 웹 검사기를 사용하여 문제를 찾았는지 여부에 관계없이 문제를 식별 할 수 없습니다.

출처

2015-01-04 BeepBoopBoopBop

jsfiddle을 작성하십시오. jsfiddle을 작성하십시오. 우리는 js issue가 될 수 있음을 알 수있는 한 css로는 아무 것도 할 수 없습니다. –

웹 사이트의 연락처 페이지를 통해 페이지 링크를 보냈습니다. Btw, 꽤 멋진 사이트가 있습니다. – BeepBoopBoopBop

대단히 감사합니다 :). 나는 귀하의 웹 사이트를보고 있었고 ".donate .hashtag 클래스가 표시됩니다 : 없음;하지만 그것은 최종 문제가 아닐 것 같아요. 내가 짐을 사촌은 그 minifyed 체크하지만, 그 breakpoints owlcarousel 문제를 생각하기 때문에. owl-item .item js 높이 : 0으로 설정되어 있습니다. 높이를 전환 할 때 200px라고 말하면 회전식을 볼 수 있습니다. 그래서 설정 js 문제가 있다고 생각합니다. –

내 대답은 조금 늦었지만 CSS3보다 오래된 버전을 사용하는 브라우저에서 동일한 문제가 발생했습니다. owl-item이 이미지 인 경우 "-webkit-transform-style : preserve-3d; " .owl-carousel .owl-item img "파일에서 owl.carousel.css

출처

2016-11-01 18:36:09 LVWS

모바일에서 볼 때 올빼미 회전 목마가 사라집니다.

답변

관련 문제