android - 当使用绝对定位元素构建页面时，WebKit 似乎错误计算了窗口/正文大小，如何解决？

Question

总结:

我一直在为客户开发移动网络应用程序，一切都进行得很顺利，直到 Android 更新似乎毁了一切。该网页现在正在呈现，就好像窗口/主体(DOM 元素)高度远小于实际屏幕高度一样。这个理论的原因是页面是围绕绝对定位元素构建的，因此具有 bottom: 0 的元素应该位于页面底部(除非父级当然是相对的，它不是' t).

该问题似乎仅在设备使用特定版本的 WebKit 时才会出现(目前仅在 Android 设备上发现该问题)。更具体地说，介于版本 534.13 到 534.30 之间(请参阅下面的调试部分)

关于布局:

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

I know the website is not perfect, no need to mention it (I was new to mobile optimised websites and went along with his ideas without questioning them).

查看当前实现:http://v-tone.com/ (注意:本期不为网站访问或任何个人利益，也页面随时更改)

问题:

可以通过向您展示一个工作 和不工作 示例来最好地说明问题:

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

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

如您所见，该实现在 Android 2.2 中有效，但在新的 4.0.3 中无效。

调试:

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

我还使用 webkit 和其他渲染引擎测试了几种不同的实现方式，试图找出问题所在。结果表明 WebKit 版本 534.13 和 534.30 之间可能存在问题。

你可以在这里看到所有的测试数据:http://www.kjetil-hartveit.com/_misc/vtone/Render%20comparison.xlsx (再次注意，此链接可能随时不存在)

解决方案？

我的客户真的希望网站尽快启动，我也是。我们不确定等待可能的 Android 更新是否值得。

• 有人知道快速解决问题的方法吗？
• 谁能确认这是一个 WebKit 问题？
• 其他建议？

Answer 1

我在 Android 操作系统的三星 Galaxy S3 上遇到了与 WebKit 534.30 相同的问题。

我使用 CSS3 制作了一个 Accordion 菜单。

<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);
}

然后 Accordion 菜单开始在 webkit 534.30 中正常工作。