Safari bug?使用GSAP翻译表行组使标题跳转到底部

时间:2017-05-16 18:39:36

标签: css animation safari css-tables gsap

我们使用GSAP制作日历动画。使用css表,行和标题来绘制日历...

我们希望动画这个表的某些部分。

但是比这里的文字更好的是在safari上打开的编码:

https://codepen.io/anon/pen/rmrJRy



var body = document.getElementById('body')

TweenMax.to(body, 1, {x: 400});

.table {
  display: table;
  width: 500px;
}
.header-group {
  display: table-header-group;
}
.body {
  display: table-row-group;
}
.caption {
  display: table-caption;
}
.cell {
  display: table-cell;
  border: solid 1px blue;
  text-align: center;
}
.row {
  display: table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div class="table">
  <div class="caption">Fevrier 2017</div>
  <div class="header-group">
    <div class="row">
      <div class="cell">L</div>
      <div class="cell">M</div>
      <div class="cell">M</div>
      <div class="cell">J</div>
      <div class="cell">V</div>
    </div>
  </div>
  <div class="body" id="body">
    <div class="row">
      <div class="cell">1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
      <div class="cell">4</div>
      <div class="cell">5</div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

PS:我刚决定用一些绝对的位置来破解。但是想听听更好的解决方案。

1 个答案:

答案 0 :(得分:0)

示例中的关键点是“TweenMax”操作,它将向“body”类添加“transform”属性。这似乎是Safari的一个错误:如果定位元素或创建新堆叠上下文的元素显示为表的子元素,则会在Safari中导致重新生成标题错误。

不幸的是,目前似乎没有更好的解决方案。 绝对位置可能是您应该依赖的最佳选择。

,这里可能是更好的解决方案。我们已经知道Safari无法正确处理我们上面提到的情况。因此,我们可以尝试告诉它如何为表格标题准备重新渲染。将方法添加将更改属性添加到标题元素。在这种情况下,我们将使用值“transform”的will-change添加到标题中。然后,一切都会好的。

有关遗嘱更改属性的详细信息可能是结帐here