hover on overflow-hidden and border-radius bug

Question

Trying to solve a recent question, I found out what looks like a Chrome and IE bug.

When I set 2 divs, and the containing div has border-radius and overflow: hidden, the inner div is responding to hover on the area that shouldn't be

In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in FF

.innerw, .innerw2 {
  width: 240px;
  height: 240px;
  position: relative;
  border-radius: 50%;
}

.innerw {
  left: 0px;
  top: 0px;
  overflow: hidden;
}

.innerw2 {
  left: 80px;
  top: 0px;
    background-color: palegreen;
}


.innerw2:hover {
  background-color: green;
}

.inner2 {
  left: 168px;
  top: 13px;
  width: 79px;
  height: 229px;
  background-color: grey;
  z-index: -1;
  position: absolute;
}

<div class="innerw">
<div class="innerw2">
</div>
</div>
<div class="inner2"></div>

I would like to know a way to avoid this bug.

Answer 1

I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.