编辑:我向Apple报告了这个错误,现在已关闭,在测试版iOS 9.0(13A4254v)上测试并正常工作.
编辑以获得更好的解释:
我在网页上有很多文章,都包含在div(列)中.这些文章有一个绝对位置,固定宽度和高度的类.
有一个按钮可以应用: - 一个translate3d到包装器/列 - 一个window.history.pushState
所有样式都正确应用于所有文章,但是当我按下按钮并在pushState之后,所有/部分nth-child()样式都没有正确应用(左,上和宽).如果我将:nth-child()更改为:nth-of-type(),则在pushState之后正常工作.
当safari确定激活切换到阅读器模式的可能性时,按下单击按钮并影响到translate3d元素(硬件加速)后,问题似乎是可见的.
它发生在使用iPad2,iPad3视网膜和4的Safari iOS8上.它不会发生使用iPad迷你视网膜.使用iOS7之前所有工作正常,但没有使用iOS8.
码:
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 1.0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#column {
-webkit-transition: 0.35s; transition: 0.35s;
-webkit-transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 10px;
left: 10px;
border: 1px solid Grey;
width: 300px;
height: 225px;
}
.moveColumn {
-webkit-transform: translate3d(200px, 0px, 0px) …Safari和Chrome以及Opera和Firefox可以处理:hover伪类和邻近兄弟选择器:
a:hover + div {}
这有效.
但是,当添加另一个相邻兄弟时:
div:hover + a + div {}
Webkit崩溃了.
但是,如果你第一次将鼠标悬停在<a>与随后的悬停<div>样式应用,因为它应该.
我更加困惑,因为如果你添加:
div:hover ~ div {}
无论是否声明了样式,它都会按照应有的方式开始工作.
我看到这个问题:
对于OS X.
有任何想法吗？
在Safari 5.1.3中,我刚刚注意到,当编写CSS邻近兄弟选择器(+一个)并引用一个<nav>元素时 - 浏览器无法兑现CSS.
所以:
h1 + p { ... } /* works fine */
h1+p { ... } /* works fine */
和
h1 + nav { ... } /* works fine */
h1+nav { ... } /* but, does NOT work */
我用其他html 5元素(部分,文章,旁边)测试了这些,它们似乎工作正常.直到你把一个导航元素放入混合; 然后就打破了.这是一个jsfiddle.
这令人沮丧,因为我的铁路资产包装商正在缩小css并取出不必要的空间.这不是IE7,Firefox,Chrome或Opera的问题 - 但Safari 5 ..
其他人有类似的吗？知道为什么？知道一种修复方法吗？