misunderstood how webkit rendering translate3d(with bug)

332 Views Asked by At

Firstly I wanna say, that I'm not looking for the solution of this 'problem', I just wanna understand how it works(or right say - does not work).

So for example I have a block:

#block {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    -webkit-transform: translateZ(0);
}

.hidden {
    -webkit-transform: translate3d(-500px, 0, 0)!important;
    /*display: none!important;*/
}

and random another block for handle click event with toggle class function for #block and resizing for get scrollbar on screen

And again - YES, I know, I can't use fixed position with translate3d, because coordinate system(actually I'm not fully understand how that works.. :( ), I read specification and bug report on chromium/webkit, but I just wanna understand why, I mean how browser see it and why rendering so strange...

here some observation:

change translate position(fully hidden -> -500px):

- with scrollbar on screen :
    render hide/visible through time,
    like(one action = one click): hide-visibility(hidden-state) -> hide(visible) -> hide(hidden) -> visible(visible) -> hide(hidden) -||-

- without scrollbar on screen :
    nothing rendering; only then something redraw on screen(like scrolling or add textcontent to block(not in layer))

change translate position(visible -> +50px):

- with scrollbar on screen :
    works well, changing position on each time

- without scrollbar on screen :
    nothing rendering, only then something redraw on screen

change display none/block:

- with scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

- without scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

with 'position:absolute' changing translate(position) works fine in all cases, 'display: none' same does not render(only then redraw something)

testing only in Chrome 33.0.1726.0, so guess it's works different in another browsers

0

There are 0 best solutions below