Overflow: hidden with border radius not working on Safari

Question

I have to make a button with a ::before hidden which shows on :hover. This animation is working great on Chrome, IE and Firefox, but i have a weird issue on Safari.

Overflow:hidden is working but without the border radius.

You should run the fiddle in safari to see this issue.

Thanks !

.btn{
  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

Have you tried this in Safari on a Mac or Windows system? My experience with safari for windows is that it is exceptionally buggy. — Johannes Piontkowitz
– Johannes Piontkowitz, Commented Mar 2, 2018 at 9:41
Do you get the same result when adding -webkit- tags to your css like here? — Johannes Piontkowitz
– Johannes Piontkowitz, Commented Mar 2, 2018 at 9:44
I'm using autoprefixer in my project so it automatically add every -webkit tags I need — Victor Allegret
– Victor Allegret, Commented Mar 2, 2018 at 9:47

starball · Accepted Answer · 2022-12-25 21:09:35Z

161

The accepted answer works, but indeed it removes the box shadow. A comment I saw in this github post says that it can be also fixed by creating a new stacking context (kind of moving an element into a new painting layer). That can be achieved with a small hack like

transform: translateZ(0)

In my case, both overflow and box-shadow are working with this solution.

UPD: just like @JadHaidar suggested in the comments isolation is a property specifically for working with the stacking context:

isolation: isolate;

edited Dec 25, 2022 at 21:09

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered Oct 8, 2019 at 9:19

Blind Despair

3,3253 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jad Haidar Over a year ago

One other way to create a new stacking context is by using isolation: isolate; Not supported by IE but is technically more correct. developer.mozilla.org/en-US/docs/Web/CSS/isolation

Cully Over a year ago

Which element are you adding this style to?

Des Over a year ago

isolation: isolate; was and fast and easy fix for me.

oomer Over a year ago

Apply isolation: isolate; to the element with overflow:hidden property.

Lushawn Over a year ago

isolation: isolate; fixed my similar issue - very interesting! Could someone explain or provide some docs related to stacking order and how this fixes the issue? I'd love to know

Victor Allegret · Accepted Answer · 2018-03-02 09:56:02Z

57

So I found a little hack to fix this issue on https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

Just add this line to your element with overflow :

-webkit-mask-image: -webkit-radial-gradient(white, black);

Let me know if someone find another solution :)

.btn{

  /* Add this line */
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

answered Mar 2, 2018 at 9:56

Victor Allegret

2,4043 gold badges21 silver badges31 bronze badges

4 Comments

Jan Heinzle Over a year ago

Worked like a charm for me, thanks! Only pitfall was, that I had to move my box-shadow to another div, but I can live with that ;)

ojsglobal Over a year ago

Fantastic answer.

zyrup Over a year ago

thanks. I'm very confused/curious why this fixes the issue

Artanis Over a year ago

Thanks for the solution! This overflow bug in iOS was driving me nuts.

Vladimir Gerasimenko · Accepted Answer · 2020-02-19 10:49:30Z

26

will-change: transform; on element with overflow: hidden; solved issue for me

answered Feb 19, 2020 at 10:49

Vladimir Gerasimenko

3973 silver badges8 bronze badges

3 Comments

Alex Over a year ago

careful tho, the will-change property is not supported by IE at all and Edge earlier versions.

double-beep Over a year ago

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Dmitry Minkovsky Over a year ago

I believe the crux of all these answers is they bump the div into a new layer (i.e. transform: translateZ(0)) and for some reason that achieves the desired effect on Safari

Dmitry Minkovsky · Accepted Answer · 2021-05-09 22:47:45Z

22

This is caused by one of several unresolved bugs in WebKit, the rendering engine used by Safari:

As Simon Fraser writes in the second link:

You can work around it in recent builds by making the element with overflow:hidden into a stacking context (e.g. position:relative, z-index:0).

This is probably the simplest solution since, unlike some of the other answers here, it does not unnecessarily introduce render layers.

edited May 9, 2021 at 22:47

answered Nov 18, 2020 at 1:03

Dmitry Minkovsky

38.4k29 gold badges127 silver badges170 bronze badges

Comments

jorisw · Accepted Answer · 2020-11-15 11:10:34Z

14

For me, adding a high z-index setting to the item with the border-radius, was enough to fix the problem.

answered Nov 15, 2020 at 11:10

jorisw

9461 gold badge13 silver badges18 bronze badges

1 Comment

roydukkey Over a year ago

I found that setting z-index: 0 is enough, and shouldn't have consequences.

Eric Aya · Accepted Answer · 2022-12-08 12:26:18Z

0

You can use any of these on your parent component:

clip-path: inset(0 0 round 50%);
clip-path: inset(0 0 round 3rem);
clip-path: inset(0 0 round 20px);

Clip-path is considered partially supported nowadays, but that applies to full specification, which has a lot of functionality. Specifically inset should be supported widely.

edited Dec 8, 2022 at 12:26

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Dec 8, 2022 at 12:12

Oleksandr Leskiv

6687 silver badges10 bronze badges

Comments

Avdesh Jadon · Accepted Answer · 2023-12-03 13:01:45Z

0

.btn{
  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

answered Dec 3, 2023 at 13:01

Avdesh Jadon

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Overflow: hidden with border radius not working on Safari

7 Answers 7

5 Comments

4 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

4 Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related