W3C home > Mailing lists > Public > www-style@w3.org > July 2014

transform-snap propery

From: Tim Severien <timseverien@gmail.com>
Date: Fri, 20 Jun 2014 04:37:25 +0000
Message-ID: <CALtEqHo5gWwZii6Tv0XJ=BBa=b1k+9K4ipVyuDw2YYL==36JkQ@mail.gmail.com> (sfid-20140620_043734_567184_BF1C7F6C)
To: www-style@w3.org
Hi CSS working group,

I'd like to propose a new CSS property; transform-snap.

I use the transform property frequently for experiments and practical
solutions as well. A common approach to vertical align an element is to set
a top offset of 50%, then translate -50%. This often causes pixel
misalignment in Webkit. Text becomes much harder to read. But Gecko handles
this nicely.

The inconcistency of implementation has left me wanting for a solution.
There are three:

- The spec is refined to make all implementations act the same
- A property is introduced to toggle pixel snapping for translates
- A property is introduced to define all kinds of snapping

That last option seems most of interest to me. Not only can you use it
prevent subpixels, you can also apply it to the other functios, like
rotation whilst keeping the syntax familiar.

A few examples:
/* prevent subpixels by forcing it in a 1x1 pixel grid */
transform-snap: translate(1px, 1px);

/* snap rotation */
transform-snap: rotate(45deg);

This could be useful together with transitions and animations.

Please consider putting this proposal or a similar solution into a draft.

Yours sincerely,
Tim Severien
Received on Wednesday, 23 July 2014 14:23:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC