M K

element.style.(префикс с заглавной буквы)(свойство с заглавной буквы)
Пример:
element.style.MozTransform="";

Используйте @media

это не баг, просто свойство полностью заменяется. Т.е. смещение происходит не из заданной вами позиции, а из позиции по умолчанию, а matrix отображается, возможно, потому, что он содержит в себе почти все преобразования для элемента и браузеру удобнее из него считывать.

А что, если изначально сделать div пустым, и менять контент для :after

.pp2::after{
    content: "bal bla bla";
}
.pp2:hover .pp2::after{
    content: "hello";
}

или создать второй с нужным контентом и менять display

"Болтовня ничего не стоит, покажите нам код".
Мы же не экстрасенсы и не тыжпрограммисты, чтобы по картинке определить причину появления полосы.
Скорее всего дело в margin и padding

Чаще всего для таких целей используется тэг <code></code> со стилями.
Но, чтобы знать наверняка, нужно смотреть код, как сказал Sanan Yuzb, либо через F12, либо правой кнопкой -> Исходный код страницы

...
.skill_block:hover {
    position: relative;
    opacity: 1;
    transform: scale(1.1); /*вот так*/
}
...

P.S. может не поддерживаться в некоторых браузерах, используите перфиксы.