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