Round positions to whole pixels?

[arnoudb]

Hi,

i noticed that the positioning of items can be on sub-pixels depending on the grid size / number of columns. Say a grid item is positioned on 150.5 px the text inside an item can become slightly more blurry.

It would be great to have an option to use rounded values for the positioning of the grid items.

BTW, congrats with the 2.0 release! An extra reason to push for out project to move to angular 14 :-)

[llorenspujol]

Hi @arnoudb ,

AFAIK the browser would always round to non decimal pixels (when rendering), I have tested it on Chrome and it rounds to the nearest integer. Said that, different browsers may use different strategies. In which browser are you seeing this issue?

[arnoudb]

Hi @llorenspujol, we experience this on all browsers.

To clarify, it is the inline styles set on a by the grid logic. Our main grid resizes to the content width of the area its displayed in. And hence each of the 12 columns don't have always a round number of pixels as the with of the grid is not always perfectly divisible by 12. If I inspect in chome i see for example the next inline styles on a random ktd-grid-item:

element.style {
    transform: translateX(297.266px) translateY(460px);
    display: block;
    transition: transform 500ms ease 0s, width 500ms ease 0s, height 500ms ease 0s;
    width: 222.949px;
    height: 420px;
}

it's the translateX that i would like to see rounded to the nearest integer, but i don't see how i can do that without copying the source code into our project.

[sabasojoodi]

Hi,
we experience this on all browsers too,
we don't know how to change transform and set round value for translateX !!!!!!!!

May you fix this bug faster because I think its need set a Math.trunc() for translateX?

[llorenspujol]

Hi @arnoudb and @sabasojoodi I am looking into this issue again.

Your problem seems to be the same as described on this links (there are way more related on internet, just 2 for example):

• https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry
• https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome

There seems to be many workarounds that solves the issue without removing the floating point in the translate. Can you test if one of those solves it? Would be nice to find a solution without needing to truncate or round the pixels to integers.

[arnoudb]

Hi @llorenspujol , thank you for looking at this again and apologies for my late reply!

I did look into all the 'solutions' online before and came across the links you posted as well. Unfortunately they don't work in all cases. We have a 12 column layout that resizes its width so the columns resize frequently. The solutions i found do some rounding ins some cases, hence they work for some people and not for others.

I understand you don't want to round to whole pixels by default and changing the default behaviour. What i can imagine is a property:

@Input snapToPixels: boolean = false;

on the grid element (defaults to false).

Behaviour will then be backwards compatible while people who need snapping can turn it on.