i've read quite few posts on ios scrolling issues, i'm aware few people have had issues. i've tried numerous fixes i'm absolutely stuck on this!
i'm making 1 page website. layout 3d cube, using css3 transforms , animations. in nutshell, problem content on front face scroll, content on other faces wont. far can tell breaks when rotate faces create cube. content in right face not scroll, acts overflow: hidden;
i don't know how useful be, i've created fiddle. uses on part of code (the main idea) , whole lot quite bit post. has tried overflow content scroll on ios inside rotated/transformed parent element before?
i'm going crazy, please help! thanks!
here's sass fiddle;
body { margin: 0; padding: 0; } .cube-container { width: 100%; perspective: 2000px; -webkit-perspective: 2000px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0,0,0); .cube-shell { position: relative; z-index: 1; margin: 0 auto; transform-style: preserve-3d; transform: rotatey( 0deg ) translatex( 0px ); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0,0,0); animation-duration: 1s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: ease; &.rotate-center-to-right { animation-name: center-to-right; } } .face { background-position: 50% 50%; background-size: cover; padding: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0,0,0); position: relative; z-index: 10; text-align: center; width: 100%; // when in "cube mode" &.cube-compatible { overflow: hidden; position: absolute; // z-index: 5; top: 0; left: 0; right: 0; // z-index: 0; } > .face-inner { overflow: scroll; // -webkit-overflow-scrolling: touch; } } .face-inner { max-width: 1320px; max-height: 100%; height: 100%; width: 100%; padding: 40px 60px; margin: auto; // display: inline-block; display: block; vertical-align: middle; position: relative; z-index: 30; box-sizing: border-box; -webkit-box-sizing: border-box; } // center face .face-center { position: relative; text-align: center; background: #ccc; } // right face .face-right { transform-origin: center right; background: #efefef; } .scroll-content { overflow: scroll; -webkit-overflow-scrolling: touch; height: 100%; } .scrollable { -webkit-backface-visibility: hidden; } } @keyframes center-to-right { 0% { transform: rotatey( 0deg ) scale3d( 1, 1, 1 ); } // 15% { // transform: rotatey( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translatey( 50px ); // } // 75% { // transform: rotatey( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translatey( 50px ); // } 100% { transform: rotatey( -90deg ) scale3d( 1, 1, 1 ); } }
Comments
Post a Comment