css3, варианты «transform: scale ()» не работают ни в одном браузере, кроме Firefox

Question

Я сейчас использую Vue CLI 3. В css я настроил скрипт наведения, который увеличивает масштаб на 10% при наведении курсора на div. У меня есть:

(this.boxData.scaleOnHover ? 
`-webkit-transform: scale(${this.scale}%);
-moz-transform:    scale(${this.scale}%);
-ms-transform:     scale(${this.scale}%);
-o-transform:      scale(${this.scale}%);
transform:         scale(${this.scale}%);` 
: "");

Другие css:

        * {
            background: none;
            background-color: none;
        }

        .textbox {
            border-color: #d3d3d3;
            border-radius: 40px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            display: inline-block;
            vertical-align: top;
            margin: 10px;
            padding: 10px;
            background-color: #ffffff;
        }

        img {
            border-radius: 100px;
            text-align: center;
        }

        p {
            font-size: 1em;
            margin-bottom: 10px;
            color: #000000;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 0.25em;
            color: #1b941e;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin-top: 0.25em;
            margin-bottom: 0.25em;
            color: #22b926;
            text-align: center;
            font-style: italic;
        }

Однако увеличение масштаба работает только для Firefox, несмотря на наличие -webkit-, -ms- и - o- преобразует Что не так со стилем?

Answer 1

scale() занимает , не знаю, почему Firefox принимает проценты здесь, но для вашего случая просто наберите

(this.boxData.scaleOnHover ? 
  `transform: scale(${this.scale / 100});`