Blurry text when translate3d is a decimal

[CobraClutch]

In Chrome, here is a comparison of slides containing text, and the css that is applied to .glide__slides for each after sliding:

transform: translate3d(-227.33px, 0px, 0px);

transform: translate3d(-227px, 0px, 0px);

To replicate, just change the width of your browser and watch the text become blurry and crisp depending on the transform.

Is there any way to round the calculations on the transforms?

[renakdup]

I have the same bug. When I set gap: 24 or 25, 26 for glide config. But when I set gap: 30, this blur effect is not repeated. And traslate3d has decimal number

[Eventusrus]

Subscribe

[alexdevero]

I temporarily somewhat solved this issue using Math.round() to round the X coordinates to whole number:

glideCarousel.on(['mount', 'mount.after', 'run'], function() {
  setTimeout(() => {
    const currentCarousel = document.querySelector('.glide .glide__slides');

    currentCarousel.style.transform = 'translate3d(' + Math.round(currentCarousel.style.transform.substring(currentCarousel.style.transform.indexOf('(') + 1, currentCarousel.style.transform.indexOf('px'))) + 'px, 0px, 0px) translateZ(0)';
  }, 500);
});

[LUGAMAFE]

the same problem, slick slider don't have this problem, it needs to be fixed.

[GabrielePuia]

Any news?

[Bricobit]

I am dedicated to making web application interfaces and it is really annoying when the client complains because they see blurry text when using a Chromium-based browser, however, in Firefox it looks perfect.

After doing quite a few tests, the only thing that has worked fairly well for me is to round the values of "X" and "Y" to a value that is divisible by two, this prevents the text from looking blurry, although it can generate discrepancies when recover the real position with respect to the one you assigned unless you use a variable to store the position before being rounded.

Be careful, not only should the position of the object in question be rounded, if it turns out that some parent object is also in positions that are not divisible by two, then the text of its children will also be blurred.

I leave here the code that I use as of 2023-12-06 in case it helps someone else

/*
#Trans(X:Number, Y:Number, Z:Number, SX:Number, SY:Number, SZ:Number, RX:Number, RY:Number, RZ:Number):void
Called whenever the DisplayObject class properties 
x,y,z,rotation,rotationX,rotationY,rotationZ,scaleX,scaleY, and scaleZ are called.
Notes: New test version, it has been modified to add rounding and try to avoid blurry text in EDGE and CHROME, when the 
positions are divisible by 2, blurry objects are produced, it must be tested in depth and determine that the rounding 
does not affect something
*/

/*private function*/ #Trans( X/*:Number*/=this.d4_x ,  Y/*:Number*/=this.d4_y ,  Z/*:Number*/=this.d4_z ,
							SX/*:Number*/=this.d4_sx, SY/*:Number*/=this.d4_sy, SZ/*:Number*/=this.d4_sz,
							RX/*:Number*/=this.d4_rx, RY/*:Number*/=this.d4_ry, RZ/*:Number*/=this.d4_rz)/*:void*/{ 
	let ox /*:Number*/ = this.d4_pivot.x;
	let oy /*:Number*/ = this.d4_pivot.y;
	let oz /*:Number*/ = this.d4_pivot.z;
	if(typeof(this.d4_pivot.x) === 'number'){ox = Math.round(this.d4_pivot.x)+"px";}
	if(typeof(this.d4_pivot.y) === 'number'){oy = Math.round(this.d4_pivot.y)+"px";}
	if(typeof(this.d4_pivot.z) === 'number'){oz = Math.round(this.d4_pivot.z)+"px";}
	this.node.style.transformOrigin = ox+" "+oy+" "+oz;
	//If it is based on chromium, we round XY to the nearest number divisible by two
	if(G_basedChromium){
	X = Math.round(X/2)*2;
	Y = Math.round(Y/2)*2;
	//Add for Z if needed in the future
	}
	this.node.style.transform = "translate3d("+X+"px,"+Y+"px,"+Z+"px) scale3d("+SX+","+SY+","+SZ+") rotateX("+RX+"deg) rotateY("+RY+"deg) rotateZ("+RZ+"deg)";			
}