Question

I built a progress bar in CSS that looks nice and better yet scales nicely in WebKit:

http://jsfiddle.net/YvFYk/

I’m wondering if anyone knows of a way to do the equivalent thing in Firefox:

• scales the height, shadow / shading positions
• keeps the width the same

-moz-transform: scale( .4 ) doesn’t do what I’m looking for since it scales the width down and keeps the container size the same.

Answer 1

Not exactly an answer but longer than a comment!

As far as I am aware the is no zoom or direct equivalent in Firefox.
Perhaps there is another way of scaling the bar? I’m assuming you want to use the same code in two places (with the size being the only difference).

Before you dismiss -moz-transform:scale bear in mind it accepts two values. So you can do scale(1, .4) which will keep the horizontal scale the same but shrink the vertical. In your example this will probably cause issue with the rounded corners, but you might be able to make it work.

Hope that helps a bit