Overflow:Hidden Does Not Work in Safari

Does overflow:hidden applied to body work on iPhone Safari?

After many days trying, I found this solution that worked for me:

touch-action: none;
-ms-touch-action: none;

overflow-x: hidden, is not working in safari

On your site, you haven't declared overflow-x: hidden for your html tag. Adding it seems to solve the problem.

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

Note: You may also need to add position: relative to the wrapper div.

Overflow: hidden with border radius not working on Safari

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. I hope it helps somebody else too.

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

isolation: isolate;

Overflow hidden is not working with absolute element in safari

This is a documented bug

The best workaround is to add to the .thumb rule the following

-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

.services {     margin: 0 0 40px 0;    }    .services ul {     list-style: none;    }    .services ul > li {     float: left;     width: 168px;     text-align: center;    }    .services ul > li + li {     margin-left: 24px;    }    .services ul > li .thumb {     border: 2px solid #b9b9b9;     border-radius: 50%;     -moz-border-radius: 50%     -webkit-border-radius: 50%;     overflow: hidden;     position: relative;     margin: 0 0 14px 0;      /*fix safari border-radius and overflow hidden problem*/      -webkit-transform: translateZ(0);      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);    }    .services ul > li .thumb img {     display: block;     border-radius: 50%;     -moz-border-radius: 50%;     -webkit-border-radius: 50%;     max-width: 100%;     height: auto;    }    .services ul > li .thumb span {     position: absolute;     background: #95bd0d;     font-size: 14px;     line-height: 20px;     width: 100%;     padding: 8px 10px;     bottom: 0px;     left: 0px;     color: #fff;    }

<div class="services">    <div class="container">        <ul>            <li>                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-3.jpg" height="168" width="168" alt="Sample Image" > <span>FAKTEN</span> </div>                <h4>Spirovent Superior - Vakuumentgaser</h4>                <a href="#">lesen Sie mehr</a>            </li>            <li>                <div class="thumb"> <img src="http://182.73.133.220/ateet/image-4.jpg" height="168" width="168" alt="Sample Image" > </div>                <h4>Spirovent Superior - Vakuumentgaser</h4>                <a href="#">lesen Sie mehr</a>            </li>        </ul>    </div></div>