Блог

Главная - Вопросы по программированию - Как исправить ошибку «граница вокруг границы» при использовании преобразования css (перевод или / и масштабирование) и значений с плавающей запятой?

Как исправить ошибку «граница вокруг границы» при использовании преобразования css (перевод или / и масштабирование) и значений с плавающей запятой?

#html #css #border #transform

#HTML #css #граница #преобразовать

Вопрос:

Я столкнулся с этой ошибкой (см. Ошибка / Ожидаемое изображение) при попытке использовать преобразование css с аргументами с плавающей запятой для элемента div с границей. Это выглядит как «граница вокруг границы», эта дополнительная граница имеет тот же цвет, что и фон элемента. Ошибка, очевидно, связана с тем, как браузеры работают со значениями с плавающей запятой, потому что, когда я использую just transform: translate(10px, 10px) , все в порядке. Одна интересная вещь, некоторые аргументы с плавающей запятой работают нормально, а другие — нет.

Я пробовал разные советы из разных ресурсов, связанные, например, с размытой границей или ошибками с плавающими значениями, но, к сожалению, ничего не работает. Вот список вещей, которые я пробовал:

  • добавить will-change: transform в элемент
  • backface-visibility: hidden
  • -webkit-filter: blur(0px)
  • -webkit-font-smoothing: antialised
  • для перевода используйте только четные / нечетные числа

Возможные обходные пути:

  • Добавить border-radius: 1px (это было неожиданно)
  • Удалить границу перенести в другой больший div центрировать его

Код для воспроизведения (попробуйте разные аргументы с плавающей запятой в transform):

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .item {
      transform: scale(1.07);
      background-color: red;
      border: 10px solid white;
      width: 50px;
      height: 50px;
    }
  </style>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

Ссылка на codesandbox

Ответ №1:

Похоже, это ошибка рендеринга в браузере. Лучшим решением (при условии, что для этой проблемы нет других ограничений) было бы добавить background-clip: content-box; блок .item CSS.

Это обрезает фон элемента в поле содержимого элемента, а не в поле его границы, что на практике означает, что фон не отображается под границей элемента, поэтому, скорее всего, он не будет перетекать через границу при субпиксельном рендеринге.

Метки: