时间戳

首页 > 解决方案 > Safari 会破坏滚动中表格行的样式

html - Safari 会破坏滚动中表格行的样式

问题描述

当我的网站即将结束生产时，我决定在一些设备上测试新样式。对于他们中的大多数人来说，它看起来很棒，正是我所追求的。但是好苹果不得不让我失望。我的表格行的背景颜色仅在第一个可见部分突出显示，一旦我开始滚动，行变得透明并且看起来很糟糕。只有在我手动单击行时它才会消失，即使那样它也只会出现在该行中。

我想也许这只是缓存的问题，所以我决定使用另一个新设备，但结果仍然相同。奇怪的是，我用 inspect.dev 检查了设备，在我的桌面上，样式看起来完美无瑕，但设备还有其他要说的。

滚动时的桌面样式（在 chrome 工具中使用 iPhone X）：

桌面风格

iPhone XR 上的第一个可见行：

滚动前的第一个可见行

在 iPhone XR 上滚动后可见的行：

在 iPhone 上滚动后

手动选择后的行：

手动选择行

这是codepen，因此您可以重现代码： Codepen

我感觉这个问题可能是由我的表格的背景附件选项引起的。也许有人可以支持我？

.table > :not(caption) > * > * {
    background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
    background-attachment: fixed;
}

table tr:nth-of-type(1) td {
    background: transparent;
    background-attachment: fixed;
    color: white;
}

table tr:nth-of-type(1) th {
    background: transparent;
    background-attachment: fixed;
    color: white;
}

任何帮助将不胜感激，因为我要在这里发疯了！关于为什么我从不使用 Apple 的真实证明。

标签： htmlcssioshtml-tablesafari

解决方案

推荐阅读