CODEWITHSUNDEEP
cssfirefoxtransformscale
X10
X10

Reputation: 13

CSS3 Scale not working for <a> in Firefox 34.0.5

I have a query about using a CSS3 scale transform. Can anyone explain why this scale transform doesn't work in Firefox (currently using 34.0.5), but does in Opera?

HTML:

<a href="#">hover me!</a>

CSS:

a {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover {
  -webkit-transform: scale(1.5,1.5);
     -moz-transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
       -o-transform: scale(1.5,1.5);
          transform: scale(1.5,1.5);
}

>> JSFiddle here <<

Upvotes: 1

Views: 1675

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272386

Set the link to display: inline-block.

Updated Fiddle

Link is an inline element. And CSS transformations cannot be applied to it as mentioned here:

Transforms apply to transformable elements.

Transformable elements are:

A transformable element is an element in one of these categories:

  • an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

  • an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

Upvotes: 2

Related Questions