CODEWITHSUNDEEP
csswebkitmedia-queriesretina-displaymasking
Bryan Irace
Bryan Irace

Reputation: 1875

How to use webkit-mask-box-image with a Retina-quality image?

Is it possible to achieve Retina-quality CSS masking using -webkit-mask-box-image? In this particular case, I am trying to round the corners of an element (border-radius is not performant enough):

.element {
    -webkit-mask-box-image: url('mask.png') 12 12 12 12 stretch stretch;
}

The mask image is twice the size that it needs to be (6 is used in place of 12 for non-retina screens).

The mask is correctly positioned, but the corner rounding is not Retina-smooth.

Upvotes: 1

Views: 1448

Answers (1)

Ky -
Ky -

Reputation: 32103

I see three solutions, here:

  • Suck it up and deal with border-radius, because you can't be getting that much lag on modern machines. Plus, only Safari and Chrome (and minor webkit-based browsers like RockMelt, Yandex, et cetera) use -webkit-mask, so unless you're making a Chrome app, you're losing a lot of your audience (currently about 54.25%) to browser incompatibility, not to mention that it requires the user to download an image just to see rounded corners.
  • Webkit uses image smoothing within its scaling algorithm, so simply provide a gigantic mask image and let it do its one-time scaling on load. This has the inherent downside of taking much longer to download and some time after to scale, but, again, it's a one-time thing until the cache clears.
  • Instead of using a PNG, use an SVG. The whole point of S‍calable V‍ector G‍raphics is that they're infinitely scalable and don't lose quality at any resolution or size. For more on how to make a SVG file, see http://www.w3.org/Graphics/SVG/

Upvotes: 1

Related Questions