- th/td 元素上的 webkit-background 渐变导致导航栏崩溃大幅减慢

Question

我一直在尝试为表格中的文本添加线性渐变，到目前为止，它是成功的。在我尝试访问我的安卓设备上的导航栏之前，一切看起来都很棒。在我包含表格的两个页面上，导航栏在折叠时滞后，感觉很糟糕。

在网上研究了这个问题后，我意识到这是一个与我在 th/td 元素上过度使用webkit 有关的问题。我完全删除了与 th/td 元素相关的全部独立背景，问题就消失了。我理解它变慢背后的逻辑，但我该如何补救呢？

JS Fiddle

一张桌子：

table:not(#tableTeam1, #tableTeam2) tr:nth-of-type(1) td {
  font-size: 20px;
  font-weight: 100;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

table:not(#tableTeam1, #tableTeam2) tr:nth-of-type(1) th {
  font-size: 20px;
  font-weight: 100;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

td,
th:not(.teamsleft) {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: normal;
  background: -webkit-linear-gradient(top right, #ffffff, #656161);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="card">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-9">
      <div class="scrolling outer">
        <div class="inner">
          <table class="table table-hover table-dark table-condensed">

            <tr>
              <th scope="col" class="firsth" id="topleft">Name</th>
              <td scope="col">Positioning</td>
              <td scope="col">Handling</td>
              <td scope="col">Reflexes</td>
              <td scope="col" id="topright">Average</td>
            </tr>


            <tr>

              <th>Jimbo</th>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td>3.0</td>
            </tr>


            <tr>

              <th>Michael</th>
              <td>2.5</td>
              <td>3</td>
              <td>3</td>
              <td>2.83</td>
            </tr>


            <tr>

              <th class="bottomleft">Dwigth</th>
              <td>2.5</td>
              <td>3</td>
              <td>3</td>
              <td>2.83</td>

          </table>
        </div>
      </div>
    </div>
  </div>
</div>

我还有第二张桌子，大约是这个大小的四倍。

是否有更有效的方法将渐变应用于表格元素？还是我应该考虑完全删除它们？

Answer 1

您不再需要不同浏览器的前缀。您可以参考社区有关它的问题。

在其他程度上，我看到你的小提琴你已经应用了相同的 gradient 。所以你可以通过使用这个代码来解决你的问题

*{
  background: -webkit-linear-gradient(top right,#ffffff, #656161);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

如果有的话，将渐变的任何变化分别应用到elements。