Chrome 14, FF6, Safari 5.1, Opera 11.51 has CSS bug with transition and input:focus margin - the input element has strange juming up and down on clicking on it. The same style input without transition is workd fine - no strange juming up and down.
This doesn't necessarily sound like a bug, but perhaps there is something that can be improved to make implementing such effects easier?
Alexey Proskuryakov, it is not code bug. It is definitely browser bug on CSS transition rendering. You can see it in http://jsfiddle.net/laukstein/Gq8TE/show/ . Us much I have checked, the bug appears just for input elements (not for div's).
Can you simplify the testcase by by setting -webkit-transition-property to something other than the default ("all")? It would be useful to know exactly which property is causing this. Also, can it be reproduced by just transitioning outline or does focus have to be involved?
I have updated bug title and URL http://jsfiddle.net/laukstein/Gq8TE/1/ (editable in http://jsfiddle.net/laukstein/Gq8TE/). Like I wrote - the bug appears for property `margin`. The same bug I posted also in http://code.google.com/p/chromium/issues/detail?id=97367
Chrome closed as WONTFIX for similar reasons.