transform: scale elements within modals are not positioned correctly

[itayganor]

I have just noticed a weird bug I could replicate on JSFiddle.

I use a custom design for checkboxes, and my V icon is being animated from transform: scale(0) to transform: scale(1) on click. Nothing too crazy.

The problem starts when I place a checkbox within another element with
a transform property. I use iziModal library in my example to demonstrate it.

Open the results page on full screen and try following these steps in order to see the exact issue:

1. Trigger the modal. nothing seems to be wrong with the checkboxes.
2. Toggle the scrollbar of the modal (with the radio buttons below). this will make #modal-content really high.
3. Trigger the modal. you can now see the V icon is not at its correct position during the transition.
4. Now apply -webkit-backface-visibility: hidden; with the second radio button group.
5. Trigger the modal. you can now see that the checkboxes themselves are offsetted during the transition.

Notes:

• -webkit-backface-visibility: hidden; on other elements than input[type=checkbox] doesn't seem to change anything.
• the problem happens only when body is direction: rtl;.

also posted on StackOverflow