css3 scale 縮放出現 1px 問題

問題描述

先來一段html代碼

<div class="container">
    <div class="parent">
        <div class="son">
        </div>
    </div>
</div>

.parent {
    border: 16px solid #392A72;
    position: relative;
    background-color: #FFF;
    width: 298px;
    height: 206px;
}
.son {
    width: 100%;
    height: 32px;
    background-color: #392A72;
}

此刻效果是正常的一倍效果

接着加入container縮放

.container {
    transform: scale(0.7);
    transform-origin: 0 0;
}

則會出現極細致的一條白色邊，原因大概就是.parent元素的border和.son的height經過縮放后不會是整數，兩個數值的小數點被省去不渲染，導致兩者疊加起來和真正要的效果差1px，而讓.parent的背景顏色出現。

解決辦法

無，盡力避免父子元素都有背景和邊框色時的縮放布局吧。

若有大佬知道請在下面留言告知我吧