Is There a Way I Can Force Chrome to Do Subpixel Rendering for a Slow Translation

Is there a way I can force chrome to do subpixel rendering for a slow translation?

You can force subpixel rendering by applying a small transformation:

#container {
    transform: rotate(-0.0000000001deg);
    -webkit-transform: rotate(-0.0000000001deg);
}

---

But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.

Also since the performance is better you shouldn't get your jittery/wave motion.

More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)

Chrome-only variability in rendered width of a divider line

I found an answer by searching the topic of "subpixel rendering". The following silly trick fixes the problem:

.tbw-dse-divider {
  align-self: stretch;
  background-color: #A6A6A6;
  margin: 0 max(1px, 0.0836em);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: max(1px, 0.0836em);
  transform: rotate(-0.0000000001deg);
}

The nearly-0 rotational transform tricks Chrome into doing subpixel rendering that it would otherwise not bother trying to do. Answer found here: Is there a way I can force chrome to do subpixel rendering for a slow translation?

Sub-pixel animation using WebGL + Google Chrome?

I'm not sure what you're asking for exactly.

Anti-aliasing can be requested when creating your WebGL context with

gl = canvas.getContext("webgl", { antialias: true });

But it's up to the browser whether or not it actually turns on anti-aliasing or not and to what level. Some browsers for example disallow anti-aliasing on certain GPUs because of driver bugs.

Otherwise you could set the canvas to a larger size and use css to display it a smaller size. The browser will most likely use GPU bilinear filtering to display the result giving you a kind fo anti-aliasing. To do that set the size of the canvas to double the size you want to display and the css to the size you want to display. Example:

desiredWidth = 640;
desiredHeight = 480;
canvas.width = desiredWidth * 2;
canvas.height = desiredHeight * 2;
canvas.style.width = desiredWidth + "px";
canvas.style.height = dsiredHeight + "px";
gl = canvas.getContext("webgl", { antialias: false });

That will make your canvas's drawingBuffer double the size it is displayed in the page and will likely make it look anti-aliased.

How to animate CSS3 smoothly at a slow speed?

Animating the transform:translate3d(0,0,0) to transform:translate3d(-200%,0,0) will have better results than the left:0 to left:-200%

@-webkit-keyframes cloud_one {
    0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-200%,0,0); }
}

Is there a technical reason why canvas's drawImage() doesn't do sub-pixel rendering / antialiasing?

For older browsers, you could animate a sprite. Create maybe 4 versions of your image, each shifted 0.25px to the left from the previous one. Paste those together in a sprite and then animate the background-position.

function moveClouds(n)
{
    var v = (n % 4) * 417;
    var h = Math.ceil(n / 4);
    clouds.style.backgroundPosition = h + " " + v;
}

Firefox CSS Animation Smoothing (sub-pixel smoothing)

The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.

It appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.

---

ALL IS NOT LOST

I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.

CLICK FOR COMPARISON

Techniques used for this effect:

• Linear transitions instead of ease.
• Box-shadow on animated object. (Softened edge helps create fake AA effect).
• Rotate object. Adding the smallest rotate helps to better utilised the rendering engine.

CSS

#parent {
    width: 50%;
    float:left;
    height: 326px;
    background-color: yellow;
    background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
    position: absolute;
    top: 75px;
    left: 150px;
    width: 100px;
    height: 100px;
    background-color: black;
    box-shadow:0 0 1px rgba(0,0,0,0.7);
    animation: range-y 10s infinite linear;
    -webkit-animation: range-y 10s infinite linear;
}
#move-x { 
    animation: range-x 10s infinite linear; 
    -webkit-animation: range-x 10s infinite linear;
}
#move-y { 
    animation: range-y 15s infinite linear; 
    -webkit-animation: range-y 15s infinite linear;
}
@keyframes range-x {
    0%   {transform: translateX(0);}
    30%  {transform: translateX(-8px) rotate(0.02deg);}
    50%  {transform: translateX(1px) rotate(0deg);}
    65%  {transform: translateX(6px) rotate(0.02deg);}
    80%  {transform: translateX(0px) rotate(0deg);}
    89%  {transform: translateX(-3px) rotate(0.02deg);}
    100% {transform: translateX(0) rotate(0deg);}
}
@keyframes range-y {
    0%   {transform: translateY(0);}
    20%  {transform: translateY(13px) rotate(0.02deg);}
    35%  {transform: translateY(-1px) rotate(0deg);}
    70%  {transform: translateY(-14px) rotate(0.02deg);}
    90%  {transform: translateY(2px) rotate(0deg);}
    100% {transform: translateY(0) rotate(0.02deg);}
}
@-webkit-keyframes range-x {
    0%   {transform: translateX(0);}
    30%  {transform: translateX(-8px) rotate(0.02deg);}
    50%  {transform: translateX(1px) rotate(0deg);}
    65%  {transform: translateX(6px) rotate(0.02deg);}
    80%  {transform: translateX(0px) rotate(0deg);}
    89%  {transform: translateX(-3px) rotate(0.02deg);}
    100% {transform: translateX(0) rotate(0deg);}
}
@-webkit-keyframes range-y {
    0%   {transform: translateY(0);}
    20%  {transform: translateY(13px) rotate(0.02deg);}
    35%  {transform: translateY(-1px) rotate(0deg);}
    70%  {transform: translateY(-14px) rotate(0.02deg);}
    90%  {transform: translateY(2px) rotate(0deg);}
    100% {transform: translateY(0) rotate(0.02deg);}
}

FINAL WORD

You can still tweak the effects a little either way to fit your requirements.
It's not perfect but I hope it helps soften the end effect for your actual animation.

How can I force WebKit to redraw/repaint to propagate style changes?

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

I’ll let someone else comment if it works for styles other than “block”.

Thanks, Vasil!

---

Related Topics