[SOLVED] Scale + Opacity causes blur and other changes

Scale + Opacity causes blur and other changes

I have encountered an issue where scaling a <div> while modifying its opacity (or any filter) causes unwanted changes to the <div> and its contents.

See this example (tested in Chrome):

div {
  width: 100px;
  height: 50px;
  margin: 20px;
  border: 1px solid black;
  text-align: center;
  /* filter: invert(0); */
  transform: scale(1.16491);
}

div:hover  {
  transition: opacity 0.4s;
  transition-delay: 0.75s;
  opacity: 0.5;
}

<html>
  <body>
    <div>
      Hover Over Me
    </div>
  </body>
</html>

Note how when opacity (which is a type of filter) is applied to the <div>, its border becomes blurry. The problem is compounded when I add another filter using the filter property. Then, the contents also become blurry (uncomment filter: invert(0); to see). Adding translateZ(0) may help in this example, however it does not help in my real use case (no idea why).

Any help resolving this issue is appreciated.

Solution

After a great deal of investigation I discovered that rounding the scale to two digits ending in an even number after the decimal revolves the issue for my use case. It does not however resolve the example in the question, but that can be resolved by adding translateZ(0).

I hope that between these two solutions all use cases can be resolved.