jQuery - Animate element that has children absolutely positioned outside it - blinking

Question

Forgive me if this has been addressed before, couldn\'t find anything.

I am animating a content bar that that has children absolutely positioned outside it (via nega

Answer 1

Well - it seems that it's a function of the browser or jQuery, not necessarily of the way you've constructed your HTML or Javascript. I say this because it seems only the pixel area inside the bounding box of the DOM element seems to be rendered (try moving the text so that half of the text is outside, and half inside... you see a "cut off" piece of text as it animates.)

So here's the work around: It uses a wrapper DIV around "#box" and "#outside" such that both are inside the wrapper's bounding box.

CSS:

    #boxWrapper {
        position: fixed;
        top: 50%;
        left:  50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -120px; /* extra 20px for the #outside */
        background:#ccc;
    }

    #box {
        background: #000;
        height:100%;
        width:100%;
        margin-top:20px; /* give 20px for the #outside */
    }

    #outside {
        background:darkblue;
        position: absolute;
        top: 0px;
        right: 0; }

And the HTML:

    

        CLICK ME
        

            I'm positioned OUTSIDE the box
        
    

And the Javascript: