::after 1px 間隔線在 Safari 顯示顏色不一樣於其它的問題

前言

在一個菜單面板的時候，把間隔線設置成了 1 絕對像素，生成的效果是下面這樣的，在一個線跟其它的不同。但在 Chrome 上就不會出現這問題。

width: 100%;
bottom: 0;
left: 0;
content: '';
display: block;
border-bottom: 1px solid #8E8E93;
position: absolute;
transform-origin: 0 100%;
transform: scaleY(0.5);

解決

細找問題，找出來了，我在 ::after 內寫的是 border-bottom ，也就是說，在縱向壓縮的時候，壓縮的是 border。
換成用 background-color ，也就是用 after 的主體。

width: 100%;
bottom: 0;
left: 0;
content: '';
display: block;
background-color: #8E8E93;
height: 1px;
position: absolute;
transform-origin: 0 100%;
transform: scaleY(0.5);

完成

---

對比

前

後