Why is datetime picker blured?

Date and time pickers
1

Hi,

Why is datetime picker so blured?

Is it possible to be sharp?

Thanks,
Bogdan

2

Hello @bogdan.talk :wave:

I’m not sure what do you mean by blurred so, can you share a screenshot of the problem?

I’m asking because for me it shows up crystal clear :grinning:

3

Hello Zsombor,

This is a screenshot:

Chrome
Chrome1680×661 36.1 KB

I thought it could be something related to the font on my Windows, but I set Arial and Times in browser Console and it is still blurry. You can find more screenshots here, on Google Drive:
https://drive.google.com/drive/folders/1wW3a-vEiJSF-2o42lPZhRuD2Av0E8QTa?usp=share_link

Thanks,
Bogdan

4

Hello Bogdan :wave:

Thanks for sharing!

I discussed this with the developers and they said that this slight blurring may be due to the 3D transformations.

5

That’s what I suspected too, that it’s from 3D, but I checked the texts in the middle and there’s nothing 3D there. Can we have a precise answer?

You said that you have “crystal clear”, please send me a screenshot and, if it’s sharper than mine, tell me why the 3D doesn’t affect your screenshot.

And if it looks as blurry to you as it does to me, do the developers have a solution to make it sharp on most devices?

Thank you!

6

Hello Bogdan :wave:

Sure, here is a screenshot but I’m using macOS :point_down:

Example
Example2832×1048 194 KB

At the moment we don’t have any solution to make it sharper, this is how it looks with the 3D transformations.

7

I see that on your MacOS it is less sharp than the text in the input, but the difference is not so visible compared to the rest of the text, because MacOS uses a different antialiasing algorithm and everything is a bit softer.

snap12606
snap126061673×750 76.3 KB

So you have become sure that 3D transformations are applied to this text.

Please send me a screenshot from the console of your browser or of your developers showing the 3D transformations applied to the text in the middle of the calendar.

Then another one in which they are disabled and the text looks sharp like this.

Thank you,
Bogdan

8

Hello @bogdan.talk :wave:

Please find the explanation with screenshots below :point_down:

Example
Example3842×1876 552 KB

As you can see the translateZ is the relevant part of the 3D CSS.

If we disable that, this is how it will looks like and as you can see the March (with black characters) it’s sharp :point_down:

Example%202
Example%2023842×1876 550 KB

I hope this explains.

9

You are right. I had not seen this object.

Thanks,
Bogdan

10

I documented myself and found that translateZ generates the blur.
If I replaced translateZ with left, I got a very sharp font.
This is a screenshot from Chrome:

snap12625
snap126251680×794 69.7 KB

I think your programmers could solve the problem easily, if they considered it a problem.
What do you say?

Thanks,
Bogdan

11

Actually, this is more complex and it depends on many things. In the first wheel, the left: -8px may be ok, but with the second one, you either need it or you don’t, and with the third, you need the right property.

By default, the number of wheels and the number of rows on the wheel is dynamic and if we try to solve as you mentioned, depending on this, we should somehow figure out how much it needs to be shifted so that it’s in the right place.

For now, the browser does everything with 3D transform.