When using a percentage value with Transform: translate, it can lead to sub-pixel accuracy in positioning elements. This can cause blurriness in your images due to less than optimal anti-aliasing by the browser. To maintain sharpness, consider positioning elements with whole-pixel values instead.
A possible workaround involves measuring and adjusting offset values using JavaScript. By calculating the difference between pre and post-translate offsets and rounding them to the nearest whole pixel, you can reapply these values as pixels instead of percentages. While not an ideal solution, it can help keep your images crisp.
Although this method sacrifices responsiveness and may overwrite other Transform attributes, such as translateX or translateY, it provides a practical way to improve image clarity.
If needed, here is a function that accomplishes the aforementioned process:
function snapTranslateXYValsToNearestPixel(element){
var xTransPos = $(element).offset().left;
var yTransPos = $(element).offset().top;
// turn off any transitions (but save values first):
var transitionVal = $(element).css('transition');
$(element).css('transition', 'none');
// turn off translate:
$(element).css('transform', 'translateX(0) translateY(0)');
var xPosDiff = xTransPos - $(element).offset().left;
var yPosDiff = yTransPos - $(element).offset().top;
var xPixelVal = Math.round(xPosDiff);
var yPixelVal = Math.round(yPosDiff);
var translateVal = 'translateX(' + xPixelVal + 'px) translateY(' + yPixelVal + 'px)';
$(element).css('transform', translateVal);
// reapply transition value (wait one tick for new css value to apply first):
setTimeout(function() {
$(element).css('transition', transitionVal);
}, 1);
}
To use this function, simply call:
snapTranslateXYValsToNearestPixel('.align-per');