CODEWITHSUNDEEP
csscss-transforms
starrin
starrin

Reputation: 3

Using percentage transformY on div may cause seams between adjacent divs

I've been using CSS3 transform to create a popup in my website, but I noticed there's a seam between adjacent divs in that popup.
I made a minimal example to demonstrate.

#wrapper {
  width: 50px;
  transform: translateY(50%);
}

#a,
#b {
  background: red;
}

#a {
  height: 50px;
  width: 100px;
}

#b {
  height: 51px;
  width: 150px;
}
<div id="wrapper">
  <div id="a">
  </div>
  <div id="b">
  </div>
</div>

result

You can see there's a seam between #a and #b.

I've digged into that problem and found out using percentag transformY with some certain height may cause this problem in chrome(I didn't tested it in firefox).

In my example, if the #wrapper's height is an odd number, translateY(50%) will create a seam in child elements.

You can try to set #b's height to 52px and you'll see that seam disappear.
In my website I fixed it by setting a fixed height for that popup, but sometimes you just can't control height, I want to know if this is a bug in chrome or I didn't make it right.

Sorry for my bad English.

Upvotes: 0

Views: 64

Answers (1)

rootShiv
rootShiv

Reputation: 1417

Add backface-visibility: hidden; to #wrapper . that will do the job.

#wrapper {
  width: 50px;
  transform: translateY(50%);
   backface-visibility: hidden; 
}

#a,
#b {
  background: red;
}

#a {
  height: 50px;
  width: 100px;
}

#b {
  height: 51px;
  width: 150px;
}
<div id="wrapper">
  <div id="a">
  </div>
  <div id="b">
  </div>
</div>

Upvotes: 1

Related Questions