Geek Answers Handbook

Background filter goes beyond the radius of the frame

I'm trying to use CSS backdrop-filterand border-radiustogether, but filter the background is out of bounds.

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>
Run codeHide result
+4
source share
3 answers

You just found a mistake!

This is bugin the implementation of the WebKit CSS property backdrop-filter. It does not take into account filter demarcation border-radius- even when used overflow: hidden;.

The same is true for clip-pathor almost any masking property applied to elements using backdrop-filter, and it remains unresolved in the latest release of WebKit Nightly Build on May 21, 2016.

, :

  • , .
  • , .
  • javascript.

, (.. border-radius: 5px;) , (, ).

WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=142662

EDIT:

Webkit Bugzilla 2016/05/25, . webkit.;)

+4

, , 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>
Hide result
+1

, - innerHTML (KM) . div 11 , - 7 ( ), 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>
Hide result

, % rem px. .

-1

More articles:


All Articles