css3-translate3d-模糊bug - css3怎么解决1px的边框模糊

Question

我这个关闭按钮的边框和那个叉叉都会有模糊要怎么解决

<p class="popmidbox">
    <p class="icon_close"></p>
</p>

.popmidbox{
 width:300px; height: 200px;border: 1px solid #ccc;margin: 100px auto;position: relative;
}
.icon_close{
 width: 16px;height: 16px;border-radius: 50%;border:1px solid #CCC;background: #fff;
 padding: 5px;position:absolute;top: -12px;right: -12px;z-index: 2;
}
.icon_close::before{
 content:"";transform: rotate(-45deg);-webkit-transform: rotate(-45deg);
 width: 1px;height: 17px;background: #ccc;overflow: hidden;position: absolute;
 top:5px;left: 13px;
}
.icon_close::after{
 content:"";transform: rotate(45deg);-webkit-transform: rotate(45deg);
 width: 1px;height: 17px;background: #ccc;overflow: hidden;position: absolute;
 top:5px;right: 13px;
}

Answer 1

Yours looks so high-end (and also very complicated).
It feels easier to draw the border using SVG now.

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='100%' y1='0%' x2='100%' y2='100%' style='stroke:#e5e5e5;stroke-width:1'/><line x1='0%' y1='100%' x2='100%' y2='100%' style='stroke:#e5e5e5;stroke-width:1' /></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;

Right and bottom borders

http://codepen.io/charleyw/pen/qbqgQR

Answer 2

You can try setting all elements in .icon_close to double size, and then use .icon_close to reduce the size by half. tranform: scale(0.5)

Answer 3

transform: translateZ(0);

Some devices with low performance or too few performance allocation resources will behave like this.
Forcing hardware rendering to be triggered in 3D may be solved.