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

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:

HTML:

<body>
  <div class="content-div">
    
    <span class="title">Lorem Ipsum</span>
    
    <div class="filter">
       HOVER OVER ME
    </div>

  </div>
</body>

CSS:

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);
}

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

CodePudding user response：

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>

CodePudding user response：

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.