WebKit似乎误判了窗口/正文的大小，当页面构建有绝对定位的元素时，如何修复？

Question

摘要：

我一直在为客户开发一个移动web应用程序，一切都进展顺利，直到Android升级似乎毁了一切。该网页现在呈现为窗口/主体(DOM元素)高度远小于实际屏幕高度。这个理论的理由是，页面是围绕绝对定位的元素构建的，因此带有bottom: 0的元素应该定位在页面的底部(除非父元素是相对的，当然不是)。

这个问题似乎只发生在设备使用特定版本的WebKit时(到目前为止，问题只出现在安卓设备上)。更具体地说，在534.13版到534.30版之间(参见下面的调试部分)

关于布局的：

该网站使用绝对定位的元素将页眉和页脚内容附加到屏幕的顶部和底部。jQuery(window).load()事件用于计算bottom和top数字，以便正确定位元素与每个元素的关系。

我知道这个网站并不完美，不需要提它(我是移动优化网站的新手，我没有质疑他的想法)。

请参阅当前在：http://v-tone.com/上的实现(注:此问题不是为了网站访问或任何个人利益。此外，页面可以随时更改)

问题：

最好通过向您展示一个工作而不是工作的示例来说明这个问题：

工作：http://www.kjetil-hartveit.com/_misc/vtone/working.jpg

不工作：http://www.kjetil-hartveit.com/_misc/vtone/notworking.jpg

如您所见，该实现在Android2.2中有效，但在新的4.0.3中不起作用。

调试：

我一直在使用jsconsole.com (远程调试)和控制台日志以及诸如此类的方法进行调试，但没有发现在工作站点和错误呈现站点之间的维度和计算上有任何显著差异。

我还测试了几种不同的实现，使用webkit和其他渲染引擎来解决问题。结果表明，WebKit版本534.13和534.30之间可能存在一些问题。

您可以在这里看到所有的testdata：http://www.kjetil-hartveit.com/_misc/vtone/Render%20comparison.xlsx (请再次注意，这个链接在任何时候都可能停止存在)

溶液？

我的客户真的希望网站尽快推出，我也一样。我们不确定它是否值得等待一个可能的Android更新。

有谁知道这个问题的快速解决方法吗? suggestions?

• 能确认这是WebKit问题吗？

Answer 1

我在三星GalaxyS3和安卓操作系统上的WebKit 534.30也有同样的问题。

我用CSS3做了手风琴菜单。

<div class="wrapper">
 <ul class="accordion">
  <li>
   <button>Button Caption</button>
   <div>
    <p>Some Information</p>
   </div>
  </li>
 </ul>
 <footer>Some information in footer</footer>
</div>

点击按钮后，li元素使用纯JavaScript (=按钮高度+ div高度)更改其高度。问题是打开了li元素，使页脚元素内容重叠。

我所做的解决方案是在每个交互元素中添加translate3d和scale(1)：

.wrapper {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}
.accordion > li > button {
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transform: scale(1);
}

然后手风琴菜单开始运作良好，甚至在webkit 534.30。