Fixed element in transform translate container not working

问题

I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside.

example :

<div class="wrapper">
    <div class="box-content">
        <div class="fixed-element">

        </div>
    </div>
</div>

<style type="text/css">

    .wrapper {
        transform: translateX(50px);
        background: pink;
    }

    .box-content {
        height: 1000px;
        background: green;
    }

    .fixed-element{
        position: fixed;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background: blue;
    }

</style>

https://jsfiddle.net/aobv5azy/

I don't want use javascript, and I want use transform translate. Animate with "left" is not good for performances.

来源：https://stackoverflow.com/questions/31071046/fixed-element-in-transform-translate-container-not-working