Chrome, css filter blur and scale at children and overflow hidden on parent results glowing edges

Question

Parent div has overflow:hidden, and the child element is scaled and blured on :hover, with transition. While animated you can see glowing edges ( I use transform:scale() strictly to avoid this, but it gets worse).
I am using Chrome 39.0.2171.99 m.

JSFiddle

<div class="overflow">
    <div class="inner">
        Hover
    </div>
</div>

.overflow{
    width: 200px;
    height: 200px;
    overflow: hidden;

}
.inner{
    width: 100%;
    height: 100%;
    background: green;
    transform: scale(1);
    filter: blur(0px);
    transition: all 0.5s ease-in-out;
}
.overflow:hover .inner{
    transform: scale(1.1);
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

Answer 1

it chrome BUG with scale and overflow .

for the container that have the ( overflow:hidden ) add

position:relative;
z-index:1;

Answer 2

The glowing edges is due to the green background being blurred -- creates a sort of faded edge effect. you can solve this by moving your background: green style to the .overflow DIV. Also the scale transforms seem unnecessary now.

JSFIDDLE

.overflow{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: green;
}
.inner{
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
}
.inner:hover{
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

EDIT:
If your content is HTML (not solid color background) that adds a bit of complexity. I kept running into an issue where the blur was applied to the visible area during the transition then the blur applied to the whole image once the transition ended... strange behavior but as far as I can tell unavoidable. I was able to achieve the desired effect by stacking two objects and using background images setting up two objects with the .back object already having the blur effect applied. Any text or other elements can be placed directly within the .front DIV but full size images need to be applied using CSS background-image: url() and must be 20 pixels larger than the container to account of the faded 10px blur effect on the edges. Hope this helps you out.

New JSFiddle example using image

<div class="overflow">
    <div class="back"></div>
    <div class="front">Hover</div>
</div>

.overflow {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.front,
.back {
    box-sizing: border-box;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 220px;
    height: 220px;
    padding: 10px;
    background-image: url(http://cache.graphicslib.viator.com/graphicslib/2982/SITours/tampa-bay-downtown-and-manatee-river-helicopter-tour-in-tampa-109952.jpg);
    background-size: 220px 220px;
    background-position: center center;
}
.front {
    z-index: 100;
    transition: all 0.5s ease-in-out;
}
.back {
    z-index: 50;
    filter: blur(10px);
    -webkit-filter: blur(10px);
}
.front:hover {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

Alternate New JSfiddle example using HTML elements