translateX causing random border to appear on left side of <div> - html

Question

I am center aligning inline-block elements by using a 50% margin and transformation.
When I add transform: translateX(-50%); it causes a thin border to appear on the left side of my divs (its a little hard to see but its on the left of 'all' and left of the 'search products').
If i try changing the translate to diffrent percentages it stays; sometimes the border gets thicker when i change the percentage. Anyone know why this could be happening?
Here is my code incase i missed something that might be important:
HTML:
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<i class="fa fa-search"></i>
<div class="search-input active">
<%= text_field_tag :term, params[:term], placeholder: "Search products..." %>
</div>
</div>
CSS:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
transform: translateX(-50%);
}
.tabs .tab {
margin-right: 32px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
display: inline-block;
vertical-align: bottom;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.tabs .tab.active {
color: #25282c;
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
border-bottom: 2px solid #25282c;
}
.search-input {
display: inline-block;
max-width: 240px;
padding: 0 32px 0 10px;
height: 40px;
position: relative;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
}
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
EDIT: It seems like the issue is happening because of my box-shadow code:
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
But i dont want to have to remove my box shadow to fix this...

Answer 1

This is a known bug with translate in transforms, and the solution is the null translation hack:
.tabs {
display: inline-block;
vertical-align: bottom;
margin-left: 50%;
translateX(-50%) translate3d(0,0,0);
}
By adding translate3d(0,0,0) to your element, you can fix your box shadow problem without removing them!

Answer 2

It seems you want it to be a border
By changing
.search-input.active {
-webkit-box-shadow: 0 2px 0 #25282c;
box-shadow: 0 2px 0 #25282c;
}
to
.search-input.active {
border-bottom: 2px solid #25282c;
padding-bottom: 0px;
}
You will get the same result without the faded line on the side.

Answer 3

Instead of using a shadow to make that border wider, without causing the other tabs to move down, you can add a transparent bottom border to all of them and change its color just on the active one.
Also, you can use Flexbox instead of translate to horizontally center the menu.
Any of these options alone would fix your problem. Here's an example using both:
.tabs {
display: flex;
justify-content: center;
font-family: monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.tab {
margin: 0 16px;
color: #92969c;
height: 40px;
line-height: 40px;
text-decoration: none;
vertical-align: bottom;
cursor: pointer;
border-bottom: 4px solid transparent;
}
.tab.active {
color: #25282c;
border-bottom-color: #000;
}
.tab:hover {
border-bottom-color: cyan;
}
.search-input {
max-width: 240px;
padding: 0 32px 0 16px;
height: 40px;
position: relative;
border-bottom: 4px solid transparent;
}
.search-input.active {
border-bottom-color: #000;
}
.search-input input {
outline: none;
height: 40px;
width: 100%;
border: none;
padding: 0;
font-family: monospace;
font-size: 12px;
letter-spacing: 1px;
}
<div class="tabs">
<a class="tab active">All</a>
<a class="tab">New</a>
<a class="tab">Popular</a>
<div class="search-input active">
<input type="text" />
</div>
</div>

Answer 4

I had the same issue and the ticked solution didn't helped me so I used margin-left 100% - a couple of percentage for this to work
Before
transform: translateX(100%); top: 0; right: 0;
After
top: 0; margin-left: 97%;
and this worked for me