All geek questions in one place

What are (if any) disadvantages of using CSS3 transform: scale for text for sensitive headers?

I have a very complex title that uses lettering.js to style each individual letter.

Resizing text using multimedia queries will force me to change other aspects, such as top and right (relative) position, as well as rotation and other styles separately.

I found in webkit transform: scale() works well and scales all aspects of the design, not just the font size.

Do other browsers have errors that make this a bad decision? It seems to have a reasonable browser , but I'm worried about errors and pixelation in other browsers and rendering mechanisms.

What are (if any) disadvantages of using CSS3 transform: text scale for sensitive headers?

+4
source share
2 answers

There are two questions that I can think of:

  • The item will still have its original size in the document, so you may need to use negative margins to handle this. Here is a demo: http://jsfiddle.net/joshnh/MwMYT/
  • Some browsers do not display scaled elements very well. Chrome is known for this (although it is most noticeable when moving to the element scale). They are improving though!

With that said, I think your proposed solution is reasonable, and the flaws are certainly manageable!

+9
source

I don’t think there is anything other than browser support. CSS transform good because it's hardware accelerated, so it's faster and smoother.

-1
source

Source: https://habr.com/ru/post/1434102/

More articles:


All Articles