transform-style: preserve-3d causing odd stutter on hover of custom element

[stolinski]

A custom element with the styling and internals below has odd behavior on hover that is not present when contents are not within a custom element. The hover state will trigger somewhat randomly while the mouse is over the object. This behavior is eliminated when removing.

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

This behavior is also not present with same css when elements are not contained within a custom element.

    .color-box {
        display: block;
        cursor: pointer;
        z-index:100;
        height: 200px;
        width: 100%;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.75, 0.45, 0.37);
        transition: transform 0.5s cubic-bezier(0.4, 0.75, 0.45, 0.37);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
    .color-box:hover {
        -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }

    <div class="color-box">
        <div class="front">{{name}} {{shade}} <span>{{color}}</span></div>
        <div class="back">Click To Copy</div>
    </div>

I can provide a demo if needed. Tested on Chrome 35.0.1916.153

[sorvell]

I don't think this is an issue with custom elements per se. I was able to repro a "jiggling" effect with the above code without any polymer. The behavior seemed somewhat intermittent, but this is because it's hard to trigger exactly the same way each time. I believe the problem here is that the element hit box is changing as it's transitioning and the hover state is applying and unapplying fast enough to make it jiggle.

Here's a version that wraps the transforming area in a container whose size does not change. The transition is applied based on that container's hover state:

http://jsbin.com/hahobeku/1/edit