Фоновый фильтр выходит за границы радиуса

Я пытаюсь использовать CSS backdrop-filter а также border-radius вместе, но фоновый фильтр выходит за границы радиуса.

body {
  background-attachment: fixed;
  background-color: #541B84;
  background-image: url("https://source.unsplash.com/random");
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.con {
  -webkit-backdrop-filter: blur(1rem) saturate(200%);
  backdrop-filter: blur(1rem) saturate(200%);
  background: rgba(247, 247, 249, 0.8);
  border-radius: 100%;
  font-size: 7rem;
  font-weight: 300;
  height: 11rem;
  line-height: 1.5;
  margin: 1rem auto;
  width: 11rem;
  text-align: center;
}
<body>
  <div class="con">KM</div>
</body>

Источник

2 ответа

Вы только что нашли ошибку!

Это bug на реализацию WebKit в backdrop-filter CSS свойство Это не учитывает border-radius определение границ фильтра - даже при использовании overflow: hidden;,

То же самое верно для clip-path или почти любое маскирующее свойство, примененное к элементам, использующим backdrop-filterи он остается нерешенным в последней версии WebKit Nightly Build от 21 мая 2016 года.

Пока эта проблема не решена, у вас есть три варианта:

  • Дождитесь исправления, чтобы реализовать функцию.
  • В любом случае реализуйте функцию с ошибками, потому что это не проблема вашего кода.
  • Используйте вместо этого JavaScript.

Я бы придерживался второго варианта в тех случаях, когда эта проблема не слишком заметна (т.е. border-radius: 5px;) и вообще не используйте его, когда ошибка становится графически очевидной (как в вашем фрагменте).

Вот отчет об ошибке в WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=142662

РЕДАКТИРОВАТЬ:

Отчет об ошибке Webkit Bugzilla был закрыт 2016/05/25 с момента появления патча. Коррекция видна на новейшей ночной сборке webkit.;)

Источник

Пока это исправление не выпущено, вы можете избежать этой ошибки, используя размытие 0px в качестве фонового фильтра для родительского элемента. Это требует скрытия переполнения, поэтому края K и M в вашем примере больше не видны.

body {
  background: url("https://source.unsplash.com/random") center /cover;
  height: 100%;
  width: 100%;
}

.con {
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  margin: 1rem auto;
  width: 11rem;
  height: 11rem;
  overflow: hidden;
  border-radius: 50%;
  font-size: 7rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(0.1em);
  backdrop-filter: blur(0.1em);
  border-radius: 50%;
  margin: -1px;
}
<body>
  <div class="con">
    <div class="inner">KM</div>
  </div>
</body>

Источник

Ваш размер шрифта превышал ширину контейнера, из-за чего innerHTML(KM), казалось, выходил за границы. Ширина вашего контейнера или div равна 11rem, а размер шрифта - 7rem(для одной буквы), что делает размер шрифта больше размера div(.con). Ниже приведен рабочий код.

body {
  background-attachment: fixed;
  background-color: #541B84;
  background-image: url("https://source.unsplash.com/random");
  background-position: 50% 50%;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.con {
  -webkit-backdrop-filter: blur(1rem) saturate(200%);
  backdrop-filter: blur(1rem) saturate(200%);
  background: rgba(247, 247, 249, 0.8);
  border-radius: 100%;
  font-size: 7rem;
  font-weight: 300;
  height: 14rem;
  line-height: 2.0;
  margin: 1rem auto;
  width: 14rem;
  text-align: center;
}
<body>
  <div class="con">KM</div>
</body>

Хотя этот код работает хорошо, но желательно использовать % Единица размера вместо rem или же px, Это поможет сделать контейнер с изменяемым размером и отзывчивым.

Источник
Другие вопросы по тегам