How to "Snap to Pixel" After a CSS Translate

Strange Pixel Shifting / Jumping in Firefox with CSS Transitions

After some ardent research, this is a known issue with Firefox's sub-pixel rendering. More obvious demonstrations of the effect can be found here and here. The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition.

The solution, which is also proposed in the Bugzilla thread, is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it. However, it is the best I can hope for, so I'm accepting it as the answer.

CSS translate(0,5px) is making things wiggle on the X axis

I thought this was an interesting problem, but I'm going to give all the credit to google.

To the nav.primary ul li and .siteHeader .siteLogo rule add this:

-webkit-backface-visibility: hidden;

I found the idea here and here.

Also here is some more reading from stackoverflow. They're talking about iPhone dev but it's still webkit.

Any way to snap animated TranslateTransform to pixel grid?

It sounds like you want TextOptions.TextHintingMode="Animated" in your XAML. See http://msdn.microsoft.com/en-us/library/system.windows.media.textoptions.texthintingmode(v=VS.95).aspx for more details.

How can I position the element at very precise pixel on image using Top and Left CSS property

Here is your problem solution.

let container  = document.querySelector('img');
let dot = document.getElementById('dot');

document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
  
  var parentPosition = getPosition(container);
    var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
     
    dot.style.left = xPosition + "px";
    dot.style.top = yPosition + "px";
}
});

// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

.container {
  position: relative;
  cursor: "crosshair";
}
#dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: red;
  transform: translate(100, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img width="200px" alt="Sample Image" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
    <span id="dot" />
  </div>
</body>
</html>

Shadow and border separate when using CSS translates

I could only reproduce the bug in Internet Explorer 11 and edge. It seems to be working fine in FireFox and chrome (didn't test others such as Opera).

Note: the half pixel problems only occurs when the rendering region itself has an uneven size.

You might have found that out by yourself in the mean time, but for reference:
The only workaround I found is to use values that will be rounded to full pixels. Adding a .1 to your uneven sized element will make it so it gets rounded to the closest higher even value so it will "snap" to the pixel in browsers that do not support true subpixel rendering while no visible change will occur on browsers supporting it since the difference in position will be of a 20th of pixel.

So the update code would be

div 
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 299.1px;
    height: 99.1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px 20px springgreen;
    border: 10px solid deepskyblue;
}

You can find a code pen demonstration of the problem and the fix I personally use.