-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Round positions to whole pixels? #65
Comments
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? |
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:
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. |
Hi, May you fix this bug faster because I think its need set a Math.trunc() for translateX? |
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):
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. |
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:
on the grid element (defaults to false). Behaviour will then be backwards compatible while people who need snapping can turn it on. |
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 :-)
The text was updated successfully, but these errors were encountered: