Jquery CSS3转换仅适用于Safari中的第一个元素

我在safari遇到了一个奇怪的代码问题。
我创建了一个jsbin，问题也在这里：

Safari版本：5.1.7

你能看一下吗？thx

TJL

编辑：

标题应该放在鼠标上方（css3旋转和透视）。但是只有第一个动画可以纠正所有其他的只是显示（如display:block-none）

以下是我在JSBin上的演示代码： （我只是在文章中添加了mouseover上打开的类） HTML:

---

通过将转换规则应用到当前需要这些转换的块，我成功地修复了Safari的这种特殊性

不幸的是，在我的例子中，有一堆幻灯片通过滚动鼠标滚轮向左/向右移动，没有初始转换。这会使您的情况稍微复杂一些，因为Safari显然不喜欢为多个块指定变换

我编辑了以下内容：我将变换规则从

[class*=“tile”]>部分。标题

移动到

[class*=“tile”]。打开>部分。标题

并更改了旋转度，以便PoC是可演示的

---

现在轮到您设计一个解决方案，使其按预期工作。

请在问题中解释您预期会发生什么、出现什么错误以及任何错误消息：）您的第一个问题。。。通过我在所有浏览器上的网页设计经验，SafariAnd在此基础上进行了扩展。Safari是最具体的名称空间。我没有看过你的代码，但是如果你想与Safari兼容，首先要看的是CSS和JS变量名称空间。它们必须是完全唯一的，即使CSS名称也不能类似于任何可能的JS名称空间。如果有一个名称空间类似于类名

.body

，Safari将很快消亡。所以它可能是第一次运行，不再运行了，因为它可能到达了一个它不喜欢的类名。我通常通过使用站点名称空间来解决这个问题。例如，一个类

.body

将变成

.site body

，或者一个站点昵称或首字母缩写，如

.s-body

，标题应该在鼠标上方显示（css3 rotateX和perspective）。但是只有第一个动画可以纠正所有其他的只是显示（如display:block-none）

<article class="tile2x1">
  <img src="http://www.placehold.it/460x220" />
  <section class="caption" style="background-color: #">         
    <header>
      <h5>www.opten.ch</h5>
    </header>
    <a href="http://opten.ch" title="www.opten.ch">
      www.opten.ch
    </a>
  </section>
</article>
<article class="tile2x1">
  <img src="http://www.placehold.it/460x220" />
  <section class="caption" style="background-color: #">         
    <header>
      <h5>www.opten.ch</h5>
    </header>
    <a href="http://opten.ch" title="www.opten.ch">
      www.opten.ch
    </a>
  </section>
</article>
<article class="tile2x1">
  <img src="http://www.placehold.it/460x220" />
  <section class="caption" style="background-color: #">         
    <header>
      <h5>www.opten.ch</h5>
    </header>
    <a href="http://opten.ch" title="www.opten.ch">
      www.opten.ch
    </a>
  </section>
</article>

[class*="tile"] {
  margin: 10px;
  position: relative;
  float: left;
  background-color: #e53b24;
}

.tile2x1 {
  height: 220px;
  width: 460px;
}

[class*="tile"] > section.caption {
  padding-top: 20px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #7ab73e;
  display: inline-block;

  transform-origin: top;
  -o-transform-origin: top;
  -moz-transform-origin: top;
  -webkit-transform-origin: top;

  transform: perspective( 600px ) rotateX( -91deg );
  -o-transform: perspective( 600px ) rotateX( -91deg );
  -moz-transform: perspective( 600px ) rotateX( -91deg );
  -webkit-transform: perspective( 600px ) rotateX( -91deg );

  transition: all .15s linear;
  -o-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -webkit-transition: all .15s linear;


  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Chrome and Safari */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
}

[class*="tile"].open > section.caption {
  transform: perspective( 600px ) rotateX( 0deg );
  -o-transform: perspective( 600px ) rotateX( 0deg );
  -moz-transform: perspective( 600px ) rotateX( 0deg );
  -webkit-transform: perspective( 600px ) rotateX( 0deg );
}


[class*="tile"] > section.caption header {
  padding-bottom: 5px;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 100;
  line-height: 22px;
  margin: 0 20px;
  border-bottom: 1px solid #fffffd;
}

[class*="tile"] > section.caption > a {
  margin: 0 20px;
  line-height: 34px;
  color: #fff;
  font-weight: bold;
  display: block;
}