Получить ширину/высоту элемента css3 с масштабированием

Я сражаюсь против странности (я думаю) свойства offsetWidth.
это сценарий:

У меня, скажем, тег span, в моем js, в какой-то момент я выполняю преобразование css3 к этому элементу, например:

        el.set('styles', {
            'transform':'scale('+scale+', '+scale+')',      /* As things would be in a normal world */
            '-ms-transform':'scale('+scale+', '+scale+')',      /* IE 9 */
            '-moz-transform':'scale('+scale+', '+scale+')',         /* Moz */
            '-webkit-transform':'scale('+scale+', '+scale+')',  /* Safari / Chrome */
            '-o-transform':'scale('+scale+')'       /* Oprah Winfrey */ 
        }); 
        w = el.getWidth();
        console.log('after scaling: ' + w);

в этот момент журнал возвращает мне нечеткие значения, например, он не знает, что сказать.
любое предложение?

Ответы

Ответ 2

Преобразования не влияют на внутренние свойства CSS, поэтому вы видите правильное поведение. Вам нужно посмотреть на Матрицу текущей трансформации - как возвращено из getComputedStyle(). WebkitTransform, чтобы выяснить, как масштабируется большое значение.

Обновление: в Firefox 12 и более поздних версиях и Chrome/Safari - как говорит Алекс ниже, вы можете использовать getBoundingClientRect(), чтобы принимать во внимание любые преобразования, применяемые к элементу

Переход по шкале начинается с 50%/50%, потому что это по умолчанию и правильное поведение. Если вы хотите, чтобы он начинался с начала координат, вам нужно установить transform-origin: 0% 0%;

Ответ 3

Я считаю, что тег span имеет display:block? преобразования должны работать только для элементов блока. Когда я получаю консоль и загружаю jquery (просто для облегчения) и делаю это:

$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})

ничего не происходит. Но если я это сделаю:

$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})

внезапно он изменяется, а offsetHeight увеличивается. К сожалению, высота смещения составляет от 16 до 19, а не до 32 (хотя визуальный внешний вид вдвое больше, а может быть, и точный), но, по крайней мере, он работает как рекламируемый.

Ответ 4

getBoundingClientRect() не работает для меня (в Chrome 49).

Этот ответ привел меня к другому решению моей проблемы: fooobar.com/info/191932/...

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
getStyleProp(element, 'zoom')    //gives zoom factor to use in calculations