html - Scale + Opacity causes blur and other changes

Question

Welcome To Ask or Share your Answers For Others

html - Scale + Opacity causes blur and other changes

asked Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

question from:https://stackoverflow.com/questions/65879296/scale-opacity-causes-blur-and-other-changes

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T19:21:31+0000

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.

Categories

html - Scale + Opacity causes blur and other changes

html - Scale + Opacity causes blur and other changes

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags