CSS: transform 1 pixel shift on Chrome - html

Question

In the actual version of the Chrome browser there is a little issue when transition of this code finishes: 1 pixel shift of the line height on the bottom (on hover of the links).
Also, I've noticed that in code snippets of jsfiddle and here it may not be visible, but on the CodePen and on my website this is what happens. Checked on Firefox - everything is fine and on every web site.
Here is snippet of Stack Overflow and CodePen:
https://codepen.io/Maxim222/pen/OQWWEB
body{
background:#111;
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
float:left;
position:relative;
}
li a{
padding:10px;
color:#fff;
text-decoration:none;
}
li a:before{
content:'';
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #fb0;
bottom: 0px;
height: 15px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
transition:all 1s;
}
li a:hover:before{
bottom:0;
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
<div>
<ul>
<li>Hello</li>
<li>Worldsdfsdf</li>
</ul>
</div>

Answer 1

From what I know, it's not your fault, it's a "glitch" with the scaleX param. If you use 0.99 as a value instead of 1, it should work fine.
body {
background: #111;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
position: relative;
}
ul li a {
padding: 10px;
color: #fff;
text-decoration: none;
}
ul li a:before {
content: '';
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #fb0;
bottom: 0px;
height: 15px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
transition: all 1s;
}
ul li a:hover:before {
bottom: 0;
transform: scaleX(0.99);
-webkit-transform: scaleX(0.99);
}
<div>
<ul>
<li>Hello</li>
<li>Worldsdfsdf</li>
</ul>
</div>