Question

有一个元素，它使用转换缩放。在元素中，有两个子元素。第一个是表格，第二个是div。 div样式设置为背面可见性：隐藏和显示：隐藏。将鼠标悬停在表格上时，显示div。并可以看到桌子渲染出的垃圾像以前一样，就像div样式影响了桌子的样式。

The backface-visibility has no effect on 2D transforms，为什么它会影响其他元素？

html

<div class="container">
  <div class="table">
    <table>
      <thead>
        <tr><td>A</td><td>B</td><td>C</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
      </tbody>
    </table>
  </div>
  <div class="tooltip">
    this is tooltip
  </div>
</div>

scss

.container {
  transform: scale(0.77);

  .table table {
    border-collapse: collapse;
    tr, td {
      border: 1px solid grey;
      padding: .5em 1em;
    }
  }

  .tooltip {
    position: absolute
    backface-visibility: hidden;
    display: none;
  }

  .tooltip.active {
    display: block;
  }
}

js

const table = document.querySelector('table')

const tooltip = document.querySelector('.tooltip')


table.addEventListener('mouseenter', () => {
  tooltip.classList.add('active')
})

table.addEventListener('mouseleave', () => {
  tooltip.classList.remove('active')
})

CodePen

PS

不同的浏览器渲染结果：

Firefox（65.0.2）

table show tooltip

Chrome（74.0.3729.169） table show tooltip
边缘 table show tooltip

在这种情况下，边缘看起来是最好的。

为什么当其父级按比例缩放时，“背面可见性”会影响其他元素？

0 个答案: