jQM 页脚在转换前后消失和出现答案

【问题标题】：jQM Footer Disappear and Appear Before and After TransitionjQM 页脚在转换前后消失和出现
【发布时间】：2014-05-27 08:46:48
【问题描述】：

jQM 的页脚有问题。 这是演示 jsfiddle： http://jsfiddle.net/lesliez/SenTt/1/

仔细查看页脚丢失并在页面转换前后再次出现。在桌面浏览器上不那么明显，但在移动设备上非常明显（延迟更长）。

请有人帮忙告诉我我做错了什么。谢谢。

我的 HTML：

    <!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
        body { background-color:white; color:black }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src='intelxdk.js'></script>
    <script type="text/javascript">
        /* Intel native bridge is available */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
        document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
</head>
<body>
    <!-- content goes here-->
    <!-- Start of first page -->
    <div data-role="page" id="foo">

        <div data-role="header" data-position="fixed">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm first in the source order so I'm shown as the page.</p>
            <p>View internal page called <a href="#bar" data-transition="slide">bar</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->

    <!-- Start of second page -->
    <div data-role="page" id="bar">

        <div data-role="header" data-position="fixed">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
            <p><a href="#foo" data-transition="slide" data-direction="reverse">Back to foo</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->

<script src='js/jquery-1.11.1.min.js'></script>    
<script src='js/jquery.mobile-1.4.2.min.js'></script>  
</body>
</html>

我的 CSS：

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}

【问题讨论】：

也许尝试通过脚本而不是绝对位置调整您的内容 div。在这里查看奥马尔和我的答案：stackoverflow.com/questions/21552308/…
嗨，我也测试了 Omar 的方式，但这导致了我单独发布的另一个问题。感谢您的建议。

标签： jquery html css jquery-mobile

【解决方案1】：

我在 1.4.2 中遇到了类似的问题，我花了很少的时间找到了一个好的解决方案。在工作时，我注意到 JQM 向页面容器添加了一些最小高度和高度内联样式，因此这似乎是问题所在。好的，首先我将我的 JQM html 包装到一个 div 元素中并将其设置为 JQM 页面容器：

JS代码：

<script type="text/javascript">
    $(document).one("mobileinit", function () {
        // Setting #container div as a jqm pageContainer
        $.mobile.pageContainer = $('#main');

        // Setting default page transition to slide
        $.mobile.defaultPageTransition = 'slide';
    });
</script>

HTML 如下所示：

            <div data-role="page" class="pageFix" id="pageOne">
                <div data-role="header">
                    <h1>Insert Page Title Here</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert Content Here</p>
                    <a href="#pageTwo" class="ui-btn">Link 1</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  


            <div data-role="page" class="pageFix" id="pageTwo">
                <div data-role="header">
                    <h1>Insert Page 222</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert 222</p>
                    <a href="#pageOne" class="ui-btn">Link 2</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  

        </div>

最后，也是最重要的，在 JQM css 文件下，我添加了以下样式：

CSS 更新！！！

body{margin:0;padding:0;outline:none;border:0;word-wrap:break-word;}
#main{position:absolute;width:100%;height:100%;max-height:100%;padding:0!important;-webkit-overflow-scrolling: touch;}
.ui-page {-webkit-backface-visibility:hidden;}
.ui-mobile-viewport-transitioning .pagesi,
.ui-mobile-viewport-transitioning .ui-page .pagesi{
height:100%!important;padding-bottom:0!important
 }

看起来过渡时发生了一些事情，所以我所做的是在过渡期间将页面的高度设置为 100% 并完成工作。仍在测试，如果我发现一些更好的解决方案将分享它！希望对您有所帮助！

干杯！

【讨论】：