Overflow hidden not working on mobile browsers

Question

Testing on an android (2.3.3) mobile browser and Opera Mini I have found that a couple of containers on my site with overflow:hidden are showing the overflow...

This is an example of one of the elements with the problem:

<div class="button">
  <span>Some Text</span>
</div>

.button {
  display:inline-block;
  position:relative;
  padding:10px;
  border:1px solid black;
  border-radius:100px;
  overflow:hidden;
}
.button:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:blue;
  mix-blend-mode:multiply;
}

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

On the mobile browsers you can see the corners of the :before element going outside the rounded corners of the parent. How can I fix this?

Answer 1

MM.. i don't know what browser you're testing this in but i can say that it works just fine on chrome...

I don't see the need to have a :before for background when you can simply add background-color: blue;

.button {
  display:inline-block;
  position:relative;
  padding:10px;
  border:1px solid black;
  border-radius:100px;
  overflow: hidden;
  background-color: blue;
}

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

<div class="button">
  <span>Some Text</span>
</div>