html - Webkit 过渡未同步

Question

我目前正在研究 CSS 中的翻页效果。我已经设法做了一些非常令人信服的事情，但是我对基于 webkit 的浏览器有疑问

用 chrome 和 firefox 测试这个链接，你会发现问题：

HTML

<div id="page-flip" class="animate">
    <div id="frontface">
        <div class="page">
            <div class="content">
                <div class="shadow">PAGE 1</div>
            </div>
        </div>
    </div>
    <div class="investigation-container">
        <div class="span12">
        PAGE 2
        </div>
    </div>
    <div id="backface">
        <div class="page">
            <div class="content">
                <div class="shadow"></div>
            </div>
        </div>
    </div>
</div>

<a href="#" style="color:#FFF; position:absolute; top:0px; left:0px; z-index:500;" onclick='$("#page-flip").toggleClass("turn"); return false;'>Toggle page turn</a>

CSS

@font-face {
    font-family:'fineliner_scriptregular';
    src: url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.eot');
    src: url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.eot?#iefix') format('embedded-opentype'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.woff') format('woff'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.ttf') format('truetype'), url('http://cthulhu.byook.com/fonts/fineliner_script-webfont.svg#fineliner_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'AgencyFBRegular';
    src: url('http://cthulhu.byook.com/fonts/agency_fb.eot');
    src: url('http://cthulhu.byook.com/fonts/agency_fb.eot') format('embedded-opentype'), url('http://cthulhu.byook.com/fonts/agency_fb.woff') format('woff'), url('http://cthulhu.byook.com/fonts/agency_fb.ttf') format('truetype'), url('http://cthulhu.byook.com/fonts/agency_fb.svg#AgencyFBRegular') format('svg');
}

body, html {
    padding:0px;
    margin:0px;
    height:100%;
    max-height:480px;
    width:320px;
    margin-left: auto;
    margin-right:auto;
    background-color:#000;
    overflow:hidden;
}

#investigation, .investigation-dummy {
    margin-top:120px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:12;
}
#inv_content, .text-dummy {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    font-family:"Advent Pro";
    font-size:12pt;
}

/* ANIMATIONS
 * PAGE FLIP
 */
 #page-flip {
    width:320px;
    height:100%;
    max-height:568px;
}
#page-flip #frontface {
    /*display:none;*/
    position: absolute;
    z-index: 75;
    -webkit-transform-origin: 0px 350px;
    -webkit-transform: translate3d(0px, -350px, 0px) rotate(45deg);
    -moz-transform-origin: 0px 350px;
    -moz-transform: translate3d(0px, -350px, 0px) rotate(45deg);
}
#page-flip.animate #frontface {
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-property: -moz-transform, -moz-transform-origin;
    -moz-transition-duration: 1s;
}
#page-flip.turn #frontface {
    -webkit-transform-origin: 530px 160px;
    -webkit-transform: translate3d(-530px, -160px, 0px) rotate(0deg);
    -moz-transform-origin: 530px 160px;
    -moz-transform: translate3d(-530px, -160px, 0px) rotate(0deg);
}
#page-flip #frontface .page {
    width: 530px;
    height: 800px;
    overflow: hidden;
}
#page-flip #frontface .page > .content {
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: translate3d(0px, 350px, 0px) rotate(-45deg);
    -moz-transform-origin: 0px 0px;
    -moz-transform: translate3d(0px, 350px, 0px) rotate(-45deg);
    background-image:url(http://cthulhu.byook.com/img/investigation/bg_investigation@2x.jpg);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
    width: 320px;
    height:480px;
}
#page-flip.animate #frontface .page > .content {
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-property: -moz-transform, -moz-transform-origin;
    -moz-transition-duration: 1s;
}
#page-flip.turn #frontface .page > .content {
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: translate3d(530px, 160px, 0px) rotate(0deg);
    -moz-transform-origin: 0px 0px;
    -moz-transform: translate3d(530px, 160px, 0px) rotate(0deg);
}
#page-flip #frontface .page > .content > .shadow {
    width: 10px;
    height:480px;
    max-height:568px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
    background: -moz-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
}
#page-flip .investigation-container {
    position:absolute;
    z-index:1;
    width:100%;
    max-width: 320px;
    background-image:url(http://cthulhu.byook.com/img/investigation/bg_investigation@2x.jpg);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
    height:100%;
    max-height:480px;
    font-size:9pt;
}
#page-flip #backface {
    /*display:none;*/
    position: absolute;
    z-index: 75;
    -webkit-transform-origin: 0px 350px;
    -webkit-transform: translate3d(0px, -350px, 0px) rotate(45deg);
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
    -moz-transform-origin: 0px 350px;
    -moz-transform: translate3d(0px, -350px, 0px) rotate(45deg);
    box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
#page-flip.animate #backface {
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-property: -moz-transform, -moz-transform-origin;
    -moz-transition-duration: 1s;
}
#page-flip.turn #backface {
    -webkit-transform-origin: 530px 160px;
    -webkit-transform: translate3d(-530px, -160px, 0px) rotate(0deg);
    -moz-transform-origin: 530px 160px;
    -moz-transform: translate3d(-530px, -160px, 0px) rotate(0deg);
}
#page-flip #backface .page {
    width: 530px;
    height: 800px;
    overflow: hidden;
}
#page-flip #backface .page > .content {
    -webkit-transform-origin: 480px 280px;
    -webkit-transform: translate3d(495px, 375px, 0px) rotate(45deg);
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
    -moz-transform-origin: 480px 280px;
    -moz-transform: translate3d(495px, 375px, 0px) rotate(45deg);
    box-shadow: 0 0 11px rgba(0, 0, 0, .5);
    width: 320px;
    height:480px;
    background-image:url(http://cthulhu.byook.com/img/investigation/bg_investigation@2x.jpg);
    background-repeat:no-repeat;
    background-position:bottom center;
    background-size:cover;
    overflow: hidden;
}
#page-flip.animate #backface .page > .content {
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-property: -moz-transform, -moz-transform-origin;
    -moz-transition-duration: 1s;
}
#page-flip.turn #backface .page > .content {
    -webkit-transform-origin: 300px 280px;
    -webkit-transform: translate3d(210px, 160px, 0px) rotate(0deg);
    -moz-transform-origin: 300px 280px;
    -moz-transform: translate3d(210px, 160px, 0px) rotate(0deg);
}
#page-flip #backface .page > .content > .shadow {
    width: 9px;
    height:480px;
    max-height:568px;
    float: right;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .20)));
    background: -moz-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .20)));
}

转换不与 webkit 同步，导致页面被隐藏（#frontface .page .content）。我想知道我是否可以采取任何措施来防止这种行为并像在 firefox 中那样进行漂亮而干净的过渡？请记住，它最终设计用于 iOS ......

非常感谢！

html - Webkit 过渡未同步

0 回答 0

Related

Reference