3

Lets say you use this code to vertically center an element

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

(this question isn't about aligning things though, so please no suggestions about alignment)

Could this cause your element to become blurry?

This article mentions that using translate can position elements at half-pixel values, thus causing blur on some browsers. Do browsers still do this, or have they been patched to not blur? If you use a percentage as the argument to translate, could the percentage evaluate to a non-integer pixel value (thus allowing the possibility of blur), or does it get rounded? EX: if you use 66%, could this lead to a fractional pixel value? This article claims that you can set transform-style: preserve-3d; on the element's parent to avoid blurring, but someone in the comments claimed that it didn't work for him.. does it actually work?

Kevin Wheeler
  • 1,331
  • 2
  • 15
  • 24
  • Browsers are only part of the equation here. When doing a transform devices will typically hardware accelerate (cache) the element. In my experience that has been the greatest cause of this blurring issue. I've even run into a certain device that would actually down sample when hardware accelerating. – ericjbasti Jul 17 '15 at 17:32

2 Answers2

1

Yes browsers do still do this. Having this issue on Chrome Version 61.0.3163.100

And transform-style: preserve-3d; doesn't resolve this issue either.

Instead use flexbox with to centre the item.

.child-not-blurred {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
GeorgeButter
  • 2,521
  • 1
  • 29
  • 47
0

One solution (not the best one) is to set Blur: 0. But there are some edge cases.

Aleksandrenko
  • 2,987
  • 6
  • 28
  • 34