CODEWITHSUNDEEP
htmlcss
Yurdesou
Yurdesou

Reputation: 229

CSS `Filter: blur()` not working properly on Safari

Started working with filter: blur() on a project and noticed it doesn't work that well with Safari.

Instead of the blur expanding outwards like it does on other browsers, on Safari it seems as if overflow was set to hidden, but that's not the case. Sometimes it works and sometimes breaks completely. I've also noticed the bug gets more "aggressive" when the filter has a transition. Anyhow, Here's a comparison versus Working (on Chrome) and Not Working (on Safari). Also, here is a codepen with a replica of this bug (it's only visible on Safari though).

As always, thanks for your help in advance. nd in case you want a preview of the code without going to the codepen, here it is:

Code:

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}

.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: 1.5rem;
  height: 90%;
  width: 93%;
  background: red;
  /* FILTER TRANSITION */
  transition: filter .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
}


/* FILTER */

.filter:hover {
  filter: blur(3.3rem);
}
<body>
  <div class="content-div">

    <span class="title">Lorem Ipsum</span>

    <div class="filter">
      HOVER OVER ME
    </div>

  </div>
</body>

OBS: For some reason CSS's markdown isn't working, sorry about that.

Upvotes: 12

Views: 26262

Answers (8)

gaandurian
gaandurian

Reputation: 121

I just had a similar issue, but none of the solutions worked on Safari 16.1,
For me the solution was to add a:

will-change: transform

to the blurred element.

Hope this helps someone.

Working snippet:

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}

.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: 1.5rem;
  height: 90%;
  width: 93%;
  background: red;
  /* FILTER TRANSITION */
  transition: filter .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  will-change: transform;
}


/* FILTER */

.filter:hover {
  filter: blur(3.3rem);
}
<body>
  <div class="content-div">

    <span class="title">Lorem Ipsum</span>

    <div class="filter">
      HOVER OVER ME
    </div>

  </div>
</body>

Upvotes: 9

bronisMateusz
bronisMateusz

Reputation: 151

The highest rated answer is not the best in my opinion. There are too many properties declared there. Just this is enough:

transform: translate3d(0, 0, 0);

Source: https://graffino.com/til/raw/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari

Upvotes: 14

Darvik Patel
Darvik Patel

Reputation: 11

This'll work fine

.filter:hover  {
-webkit-backdrop-filter: blur(15px);
}

Upvotes: 1

Marian Rehak
Marian Rehak

Reputation: 375

If anyone's wondering, below are 4 CSS rules that need to be added to the specific class. Sometimes, Safari has issues rendering hover states (e. g. combining hover scale and border radius), so this fixes most these issues.

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Upvotes: 19

Iam coding
Iam coding

Reputation: 13

.filter:hover {
  -webkit-filter: blur(3.3rem);
}

Put -webkit before filter: blur(...)

Upvotes: 1

Eklavya Jain
Eklavya Jain

Reputation: 47

The problem is that the current Safari version on Windows is some way behind the current Safari version for Mac.

On Windows, the current Safari version is only 5.1, compared with 6.0 and 7.0 on Mac.

The bad news for you is that Safari 5.1 does not support the filter style.

There is no way around this; it simply isn't supported, and won't be until Safari gets an update on Windows.

The only good news is that there aren't that many people using Safari on Windows, so this issue shouldn't affect too many of your users.

You can see more about the browser support for this feature on CanIUse.com: http://caniuse.com/#search=filter

Upvotes: 0

Iam coding
Iam coding

Reputation: 13

this problem is happening because safari 5.1 does not support the filter style. If you have chrome you can use it but if you dont you have to download or you cannot use filter style.

Upvotes: -1

Anonymous
Anonymous

Reputation: 557

You can try this :

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}
.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: 1.5rem;
  height: 90%;
  width: 93%;
  background:  red;

  /* FILTER TRANSITION */
  transition: filter .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
}

 /* FILTER */
.filter:hover {
   -webkit-filter: blur(15px);
   -moz-filter: blur(15px);
   -ms-filter: blur(15px);
    filter: blur(15px);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <div class="content-div">
    <span class="title">Lorem Ipsum</span>
    <div class="filter">
       HOVER OVER ME
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions