Using Transform Scaling for responsiveness?

[homodreamus]

Hi tricks!

[Small intro]I’m working on some kind of a widget/box that would be planted in external sites (by request) and will show additional content/info automatically, inside the main content part. Like an info box inside the article.

My problem is with responsiveness. There are some graphical elements, like a timeline and special buttons and stuff like that. It could make adjusting sizes a bit of a headache

[The question] I was wondering whether using CSS’s “transform: scale” is a smart move. It does scale well for me and all, but are there any serious drawbacks?

Many Thanks

[Shikkediel]

Codepen is using it to adapt the size of the embedded demos so I reckon that makes it legit.

:-)

[homodreamus]

Thanks Shikkediel!
I still wonder.

I understand it’s not useful when there is more to responsiveness than scaling, but if that’s really the only thing I need?

EDIT: a “+1” button would have been great here

[Shikkediel]

I understand it’s not useful when there is more to responsiveness than scaling, but if that’s really the only thing I need?

I’m not sure I understand what you’re saying there, could you elaborate on that?

The embedded pens are both scaled and responsive – another trick with padding-top is used to keep the correct aspect ratio.

[homodreamus]

1. Thanks. Yes, I’m using the padding trick too
2. Well, I don’t know – I just didn’t see it really that much, so I wonder what are the problems with it. I guess in the past the browser compatibility wasn’t great, so that’s one problem, but other than that..

Thanks again, really appreciates it

[Shikkediel]

No problem. Another side effect might be that the browser will use hardware acceleration more when using a transform: scale but that doesn’t seem like an issue. Browser compatibility should indeed be not much of an problem anymore either (even early Android supports it).

[homodreamus]

Thanks

Yes. Performance shouldn’t be a problem – it happens rarely really and even on my old laptop it works pretty well

[homodreamus]

Seems like at least some text becomes a little blur, especially when scaled down..

[Shikkediel]

Any particular browser? I think I’ve read this before, there might be tricks around for it. None that I could immediately provide myself though.

[homodreamus]

Chrome
Firefox looks fine

[homodreamus]

The solution of backface-visibility and blur(0) improves things, but doesn’t really solve the problem

[Shikkediel]

Gotta say I didn’t see that one coming. Text looks quite crisp on the scaled Codepen demos and I thought it only was a Chrome issue under more complicated circumstances. Any chance of providing a demo?

[homodreamus]

1. Well, maybe they are doing it differently. Can you provide a link? When I look on embedded codepen stuff on css-tricks, it seems like the usual iframe
   (example: https://css-tricks.com/using-css-cursors/)

2. yes – http://earlybirds.info/wikidots/ver3/
   You can put “transform: scale(0.7)” on the wd-wrapper element and check the text inside the pink circle

3. Not related (and maybe I should open a new thread), but I’m still considering iframe vs js/ajax, both in terms of usability and performance. I really don’t know

[Shikkediel]

A CSS approach is always preferred above a JS one of course…

Here’s an example of the embedded demos I was talking about (profile page) :

http://codepen.io/Shikkediel/pens/public/

I’ll have a look at the provided link as well.

Edit – looks fine to me on Windows 7 Chrome…

[homodreamus]

1. I’m not that sure – JS performance has rocketed in last years and it seems to be a real focus of software developers. Or, at least, I’m not sure that some JS stuff here and there will matter that much

2. It seems that when I scale the text directly, the blurriness does not happen

3. Codepen do width/height:201% and scale(0.5) – why exactly? to make sure the text isn’t that big?

[Author]

Posts