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

Related searches

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...

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!

html, This is a known bug with translate in transforms, and the solution is the null translation hack: .tabs { display: inline-block; vertical-align: bottom;  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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.

The `background-clip` Property and its Use Cases, If both the padding and the border-width are 0 , then all the three We take a box with random dimensions, give it a simple gradient The problem is that the text starts right from the edge of the orange the original image in IE/ Edge, but they look ugly in Firefox and Chrome! transform: translateY(-50%); The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. To better understand the transform property, view a demo. yes. Read about animatable Try it. JavaScript syntax: object .style.transform="rotate (7deg)" Try it. Browser Support.

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>

transform, skewX() and skewY() : Tilts an element to the left or right, like turning a rectangle not intended to be written by hand, but combines all transforms into one. display: inline-block; transform: translateX(value); transform: translateY(value);. It's important to note that an element using transform will not cause  Left to Right. To scroll from left to right, we simply switch the values of translateX() around so that 100% becomes -100% and vice-versa. We've also set the starting position to -100% and changed the class and animation names to scroll-right (but these could be any name you like).

Manipulating content with CSS3 transforms · WebPlatform Docs, Individual x/y functions are available: translateX(), translateY(), scaleX(), To appear correctly, it must be applied to a transformed element's ancestor. This shows a series of transforms that rotate around a point near the bottom right corner: .parent { border : thin solid #000; perspective : 1000px; perspective-​origin : 50%  I'm a geeky gamer girl who happens to be a full stack web developer for fun and profit. When I'm not coding, I'm playing League of Legends or something in Steam, or making jewelry, or watching something wacky on Netflix.

Discover the Power of CSS Transforms, With this HTML, the inner div will appear 15px to the right of where its default position was. You can use the functions translateX() and translateY() as well if you But it was never guaranteed to be smooth and caused repainting and Between 20% and 50% it transitions from that half scale to a 120deg  The pericardium is the two thin layers of tissue that surround the heart. When this area becomes inflamed or irritated, it can cause a sharp stabbing pain on the left side or middle of the chest.

Certain medical conditions, including the following, may cause discolored patches of skin: Cyanosis. Insufficient oxygen in the blood can cause the skin and lips to appear blue or purple.

Comments
  • Here is a link to a JSFiddle incase somebody wants to take a look jsfiddle.net/d5gbxv1z
  • Thanks, i figured it was a bug but i couldn't figure out what words to google haha, worked perfectly! Thanks everyone else for your solutions too.