translate3d z-index问题与表行/单元格背景和背景颜色

Question

有没有人见过以下jsfiddle https://jsfiddle.net/aoede3/3n8qokec/问题，或者知道解决方法 - 除了我找到的反向z索引之外？

基本上应该是一点点：从表格单元格悬停工具提示。

[注意：我无法改变如何使用transform3d（）重新定位每一行来渲染表格（由于几个长期的莫名其妙的原因等），并且通过小提琴中的JS复制了这个动作。

在'tr'或'td'上出现css'background'或background-color'（与'border'相同的问题）应用并绘制它的堆叠上下文仍然作为z-index存在于行中它们本身具有来自tranform3d的Z堆叠上下文（理论上它应该覆盖2d z-index）。

变换样式：父元素上的flat或preserve-3d没有区别

每一行虽然来自translate3d堆栈的Z堆叠上下文本身是顺序的，其z-index按其dom位置排序（来自浏览器计算的“z-index：auto”）。如果使用JS来反转这种排序，例如顺序向上工作的最后一行“z-index：0”然后tr或td上的背景和/或背景颜色然后不重叠隐藏工具提示按照示例（只是取消注释JS并重新运行）

我在Chrome，FF，IE（边缘）和原因，反向z-index'修复？中测试了这个？是一致的。其他人可以解决一些问题吗？

如果需要更多信息，请详细说明。

$(function() {
  // for each tr translate3d position
  $('tr').each(function(i) {
    if (i > 0) {
      $(this).css({
        transform: "translate3d(0, " + i * 38 + "px, 0)"
      })
    } else {
      $(this).css({
        transform: "translate3d(0, 0, 0)"
      })
    }
  })

  // Potential fix ?
  // get total of rows and reverse the z-index from bottom up  
  //  var rows = $(".table tbody").children('tr').get();
  //  $.each(rows, function(i, el) {
  //      $(el).css({"z-index": (rows.length - i) * 10 });
  //  });

});

/* colouring the background of each cell */


/* .table > tbody > tr > td {
  background-color: rgba(255, 0, 0, 1);
}
 */


/* alternatively you can see same issue with tr */

.table-striped>tbody>tr:nth-of-type(even) {
  background-color: #f4f4f4;
}


/***********************************/

body {
  font-family: roboto;
  font-size: 13px;
  line-height: 1.42857143;
  color: #5e5e5e;
  background-color: #edecec;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

table {
  background-color: #ffffff;
}

caption {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #777777;
  text-align: left;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 18px;
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  padding: 10px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #f0f0f0;
}

.table>thead>tr>th {
  vertical-align: bottom;
  border-bottom: 2px solid #f0f0f0;
}

.table>thead>tr>th {
  background-color: #fff;
  vertical-align: middle;
  font-weight: 500;
  color: #333;
  border-width: 1px;
  text-transform: uppercase;
}

.table [class*="bg-"]>tr>th {
  color: #fff;
  border-bottom: 0;
}

.table [class*="bg-"]+tbody>tr>td {
  border-top: 0;
}

.table.table-inner {
  border: 0;
}

.table>thead>tr>th:first-child,
.table>tbody>tr>th:first-child,
.table>tfoot>tr>th:first-child,
.table>thead>tr>td:first-child,
.table>tbody>tr>td:first-child,
.table>tfoot>tr>td:first-child {
  padding-left: 30px;
}

.table>thead>tr>th:last-child,
.table>tbody>tr>th:last-child,
.table>tfoot>tr>th:last-child,
.table>thead>tr>td:last-child,
.table>tbody>tr>td:last-child,
.table>tfoot>tr>td:last-child {
  padding-right: 30px;
}

.table>tbody>tr.active>td,
.table>tfoot>tr.active>td,
.table>tbody>tr.info>td,
.table>tfoot>tr.info>td,
.table>tbody>tr.warning>td,
.table>tfoot>tr.warning>td,
.table>tbody>tr.succes>td,
.table>tfoot>tr.succes>td,
.table>tbody>tr.danger>td,
.table>tfoot>tr.danger>td {
  border: 0;
}

.table>tbody>tr:last-child>td,
.table>tfoot>tr:last-child>td {
  padding-bottom: 20px;
}

.table-striped td,
.table-striped th {
  border: 0 !important;
}

th,
td {
  width: 100px;
}

tr {
  position: absolute;
  top: 0;
  left: 0;
}

.action-button-column .actionlabel {
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: -999999em;
  left: auto;
  width: 1px;
}

.action-button-column .button .actiontooltip {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 0 1px #ffffff;
  box-shadow: 0 0 0 1px #ffffff;
  color: #ffffff;
  display: inline-block;
  padding: 10px;
  position: absolute;
  top: 13px;
  right: -41px;
  white-space: normal;
  width: 200px;
  word-wrap: break-word;
  z-index: 457;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row_one">
      <td>1</td>
      <td>
        <div class="action-button-column" style="width: 100%;">
          <div tabindex="0" role="button" class="button button-borderless" style="float: left;"><span class="button-wrap"><span class="button-caption"><span class="actionlabel">Aenean iaculis justo sit amet</span><span class="actiontooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></span>
            </span>
          </div>
        </div>
      </td>
      <td>Christopher</td>
      <td>@makinton</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Madeleine</td>
      <td>Hollaway</td>
      <td>@hollway</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sebastian</td>
      <td>Johnston</td>
      <td>@sebastian</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Mitchell</td>
      <td>Christin</td>
      <td>@mitchell4u</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Elizabeth</td>
      <td>Belkitt</td>
      <td>@belkitt</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Benjamin</td>
      <td>Parnell</td>
      <td>@wayne234</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Katherine</td>
      <td>Buckland</td>
      <td>@anitabelle</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Nicholas</td>
      <td>Walmart</td>
      <td>@mwalmart</td>
    </tr>
  </tbody>
</table>