domske/safari-fix-overflow-border-radius.md

Last active January 30, 2026 17:22

Star (37) You must be signed in to star a gist
Fork (3) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0.js"></script>
Save domske/b66047671c780a238b51c51ffde8d3a0 to your computer and use it in GitHub Desktop.

Bugfix (Workaround) for Safari (iOS): Border radius with overflow hidden does not work as expected.

Raw

safari-fix-overflow-border-radius.md

There is a bug in Safari when using border-radius and overflow: hidden. Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.

There are some workaround. We need to place the element with the overflow attribute into a stacking context. I've tested the following workarounds on the latest version of iOS (14.4). You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs)

Use this on the element with overflow: hidden and border-radius:

z-index: 0;
/* Or another value. */
/* The position may need to be set to e.g. relative or absolute. */

transform: translateZ(0);
/* Or translate3d(0, 0, 0) or other values. */

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

will-change: transform;
/* Read the docs first. Apparently it should be used carefully. */

Let me know if this fixed your problem or not. Personally, I use transform or z-index. These are probably the most harmless properties. But feel free to post your opinion and other great solutions.

mosuzi commented Dec 5, 2022

Unfortunately, neither those above worked for me :(

fdambrosio commented Dec 6, 2022

good, it works to fix on ios 16 !

jowc commented Jan 22, 2023

Thanks. The z-index worked for me. :)

cesswhite commented Feb 11, 2023

Thank you, two solutions work for me in CSS:
1.- mask-image: radial-gradient(white, black);
2.- will-change: transform;

In UnoCSS/TailwindCSS this class work for me:
will-change-transform

alexhartan commented Feb 21, 2023

You are the man! This fix just solved a bunch of headaches for me

SebHex commented Apr 2, 2023

Using the Tailwind CSS class transform-gpu worked for me

This is similar to using the following CSS:

transform: translate3d(0, 0, 0);

dsajlovic commented Apr 11, 2023

April 2023 still with the same problem, ONLY in Safari -.-
Thank you for posting workaround :)

minhoyooDEV commented Apr 12, 2023

life saver

Frederick-88 commented Apr 13, 2023

transform: translateZ(0); works for me in 2023 - thanks a lot!

btlm commented Apr 20, 2023

z-index: 0; works as charm

kaiwen-wang commented May 15, 2023 •

edited

Loading

confirming tailwind will-change-transform works

VolodymyrShtef commented May 15, 2023

Thanks, z-index did the job

alexfranco90 commented Jun 1, 2023

Thanks, both z-index: 0; and transform: translateZ(0); works for me. In my case will-change: transform works too but i was trying to find an alternative.