Safari错误?使用GSAP翻译表行组标题会跳到底部 [英] Safari bug ? Translating table-row-group using GSAP make caption jump to bottom
问题描述
我们正在使用GSAP为日历设置动画。日历是使用css表,行和标题绘制的。
We are animating a calendar using GSAP. The calendar is draw using css table, row and caption...
我们想对这张表的某些部分进行动画处理。
We wanted to animated some part of this table.
但是比单词更好的是在Safari上打开一个codepen:
But better than words here is a codepen to open on 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>
PS:我只是决定在一些绝对位置上乱砍。但是希望听到更好的解决方案。
PS: I just decided to hack around with some position absolute. But would like to hear to better solutions.
推荐答案
示例中的关键点是 TweenMax操作,该操作将添加将转换属性转换为 body类。似乎是Safari的错误:如果定位的元素或创建新堆栈上下文的元素作为表的子元素出现,则将在Safari中引起标题的重新渲染错误。
The key point in your example is the "TweenMax" operation, which will adds a "transform" property to the "body" class. It seems a bug of Safari: if a positioned element, or a element who creates a new stacking context, appears as a child element of the table, a re-render bug of caption will be caused in Safari.
不幸的是,目前似乎没有更好的解决方案。
绝对位置也许是您应该依靠的最佳选择。
是,这也许是一个更好的解决方案。我们已经知道Safari无法适当地单独解决我们上面提到的情况。因此,我们可以尝试告诉它如何准备表格标题的重新呈现。向标题元素添加意愿更改属性是一种方法。在这种情况下,我们将带有 transform值的遗嘱更改添加到标题。然后,一切都会好起来。
Yes, here maybe a better solution. We already known that Safari cannot handle the situation we've mentioned above by itself, appropriately. So, we can try to tell it how to prepare a rerender for the table caption. Adding a will-change property to the caption element is the way. In this case, we add the will-change with the value "transform" to the caption. Then, everything will be Okay.
有关will-change属性的详细信息可以结帐此处
The details about will-change property could be checkout here
这篇关于Safari错误?使用GSAP翻译表行组标题会跳到底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!