1

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.

jeremydelacasa
  • 49
  • 1
  • 6
  • Note: in (webkit) browsers, you cannot place a fixed element within an element with a transform, if you do the fixed positioning will not calculate correctly, and will often be relative to the parent and not viewport. – SW4 Jun 26 '15 at 10:45
  • if it's fixed why do you need it to be inside the translated div? fixed elements are fixed to the viewport so you can put them anywhere – Pete Jun 26 '15 at 10:48
  • @Pete To maintain consistency in the DOM, but I think you're right. There is no other solution. Ty =) – jeremydelacasa Jun 26 '15 at 10:56
  • see here - http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue – Dmitriy Jun 26 '15 at 10:57
  • @jeremydelacasa In that case I would use a bit of js to move the div after the page has loaded – Pete Jun 26 '15 at 10:59
  • @Dmitriy I've seen and no proper solution. Ty. – jeremydelacasa Jun 26 '15 at 11:17
  • @Pete Why not thank you for the idea. – jeremydelacasa Jun 26 '15 at 11:18

0 Answers0