Grow your CSS skills. Land your dream job.

-webkit-transform: scale() not scaling larger than 1.0

  • # October 2, 2012 at 4:15 pm

    to me this seems strange enough to be ‘just me’… but I was working on a form and used the css3 transform rule to make my radio buttons and check-boxes bigger. It looks great in firefox, but in chrome (fully updated), they won’t scale to be larger than a value of 100%;

    I can’t show the site Im working on, but found a good example:
    [http://jsfiddle.net/leaverou/zBuyN/](http://jsfiddle.net/leaverou/zBuyN/ “http://jsfiddle.net/leaverou/zBuyN/”)

    In this example, the checkboxes are scaled to be 800% and in firefox, the’re big.. but for me, in chrome, they’re only 100%. I can use firebug-light to change the scale value to make then smaller than 100% but not larger.

    Has anybody else seen anything like this? Does that jsfiddle example work for you in chrome?

    # October 2, 2012 at 5:31 pm

    I’m using Chrome on Mac, but it seems to me that they’re waaaayyyy to big: in other words: it’s just works fine.

    # October 2, 2012 at 7:23 pm

    If you want custom input fields then transforms aren’t the way to go, you would be much better of creating custom images and using a small snippet of JavaScript which will allow you to create a much more consistent look and feel between all browsers.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".