Sony Xperia Tablet Z上的CSS伪元素渲染问题

Question

我正在为客户开发一个网站，并且遇到一个问题，其中伪元素（:: before＆amp; :: after）正在呈现有趣的白线。只有在这款平板电脑上我才能解决这个问题，因为墨菲定律会让我的客户正在测试它。

这是一个如何呈现它的例子：

HTML：

<li>
  <div class="arrow_box" id="step2">STEP 2</div>
</li>
<li>
  <div class="arrow_box" id="step3">STEP 3</div>
</li>

这是我正在使用的CSS：

.active .arrow_box {
    background-color: #ff3838;
}

.active .arrow_box:after {
    border-left-color: #ff3838;
}

.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 30px;
    margin-top: -30px;
}

.active .arrow_box:after {
    border-left-color: #ff3838;
}

.arrow_box:before {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 36px;
    margin-top: -36px;
}

Answer 1

问题来自元素宽度的小数像素值。这很难避免百分比，所以我转换为整个像素值，这解决了问题。

感谢所有贡献者的帮助。

Answer 2

我遇到了同样的问题，并且必须保持每个<li>百分比宽度。在桌面上看起来很棒，但平板电脑上出现了这些相同的线条。 我知道这是一篇很老的帖子，但这是我的解决方法，以防将来有人需要这个。 使用您提供的代码，更改将是：

.arrow_box:after,
.arrow_box:before {left: 99%;}
li {margin: 0 1px;}