时间戳

首页 > 解决方案 > - th/td 元素上的 webkit-background 渐变导致导航栏崩溃大幅减慢

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

问题描述

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

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

JS小提琴

一张表：

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>

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

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

标签： htmlcsscss-tableslinear-gradients

解决方案

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

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

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

并将梯度的任何变化分别应用于elementsif there 。

推荐阅读