I am currently utilizing Vue CLI 3. Within the CSS, I have implemented a hover effect that scales up by 10% when hovering over the div. Here is the snippet of code:
(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}%);`
: "");
Additional 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;
}
Nevertheless, despite including -webkit-, -ms-, and -o- transforms, the scale enlargement only seems to function correctly in Firefox. What could be causing this issue with the styling?