Safari bug ? Translating table-row-group using GSAP make caption jump to bottom

问题

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.

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: I just decided to hack around with some position absolute. But would like to hear to better solutions.

回答1:

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.

~~Unfortunately, there seems no better solution, for now. Absolute position maybe the best choice you should rely on.~~

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.

The details about will-change property could be checkout here

来源：https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom

标签

css

animation

safari

css-tables

gsap