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

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!