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

Question

Я борюсь против странности (я думаю) свойства 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);

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

Answer 1

getBoundingClientRect() возвращает правильные значения для меня.

jsFiddle .

Answer 2

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

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

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

Answer 3

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

Этот ответ привел меня к другому решению моей проблемы: https://stackoverflow.com/a/7894886/1699320

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

Answer 4

Я так понимаю, у тега 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 (хотя внешний вид в два раза больше размера и, возможно, он точен), но, по крайней мере, он работает так, как рекламируется.