Re: transform-snap propery

On Thu, Jun 19, 2014 at 9:37 PM, Tim Severien <timseverien@gmail.com> wrote:
> 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

Or a fourth - make vertical centering possible without hacks.  This is
luckily possible today - just use flexbox and align-content:center;.
(This is technically still *very slightly* hacky if you're not using
Flexbox for anything else, but the Alignment spec isn't yet finished
and implemented. When it is, you can use align-content and
justify-content on display:block elements too.)

> 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);

If the following example is at all representative, you really don't
want to do that:

<!DOCTYPE html>
<div class=one>foo</div>
<div class=two>foo</div>
<style>
div { animation: foo 3s linear alternate infinite; }
.one { animation-name: continuous; }
.two { animation-name: discrete; }
@keyframes continuous {
 from {
  transform: translateX(0); }
 to {
  transform: translateX(100px); } }
@keyframes discrete {
 from {
  transform: translateX(0);
  animation-timing-function: steps(100); }
 to {
  transform: translateX(100px); } }
</style>

At least in Chrome, the second element is noticeably jerky.

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

I can maybe see the use of this, for example if you wanted to animate
clock hands that only tick at 1/60th intervals of the circle, you'd
set the snap to be 6deg.  Then you could set values and let
transitions/animations just work normally, without having to worry
about setting up step() timing functions appropriately.

Any other use-cases?

~TJ

Received on Wednesday, 23 July 2014 22:35:52 UTC