in the recent project, a student who did the refactoring left, then wrote the refactoring himself, and then encountered the common ios one-pixel problem. Although there is already an answer to this question on the Internet, I encountered some questions in the process of finding the answer. After Baidu failed, I came here to find a solution to Daniel.
there are many solutions on the Internet, but the one that most people use is to reset viewport with js or use css to scale. I adopted the second option. However, I found that I still don"t know anything about the attribute transform. Generally speaking, this attribute is written as follows:
transform:scale(0.5);but I found that one pixel is written like this:
transform(scale(0.5));I hope Daniel can give me an answer. This is to find an one-pixel way to write
. .radius-border{
position: relative;
}
.radius-border:after{
content: "";
box-sizing: border-box;
position: absolute;
width: 85px;
height: 26px;
left: 0;
top: 0;
border-radius: 50px;
border:1px solid rgba(42, 146, 235,0.3);
-webkit-transform(scale(0.5));
-webkit-transform-origin: 0 0;
transform(scale(0.5));
transform-origin: 0 0;
}
.radius-border .txt{
position: absolute;
left: 13px;
top: 3px;
font-size: 14px;
color: -sharp2A92EB;
}
<div class="radius-border">
<span class="txt">Ta</span>
</div>