bug(overlay): overlays are sometimes blurred in Chrome

[aminebizid]

I think you should change the text to "Use your eye glasses to see tooltips"

PS: My chrome zoom is set to 100%

[kherock]

+1

This is because the transforms on the parent .md-overlay are not integers, any way those can be rounded to the nearest pixel?

[ivoviz]

Indeed, it would be nice to have them rounded.

[robertmesserle]

@Zigzag95 Are there any specific steps or browser requirements to reproduce this?

[robertmesserle]

Actually, we were able to recreate it only when using a Macbook Pro with a non-retina display on Chrome. Let me know if this happens under different circumstances as well.

[kherock]

ChromeOS (I'm going to assume that will include Linux) also has the issue. Can test on Windows soon.

[robertmesserle]

Ah, okay. We tested on Linux and were not able to recreate it so far. Haven't checked Windows yet.

[ivoviz]

@robertmesserle Although I've tested with the menu component, both Windows and Linux have this issue. I would assume the amount of blur also varies with ppi.

[robertmesserle]

Yea, it should impact anything built on top of Overlay (ie. anything floating).

Some notes:

• Rounding pixel values should fix some use-cases, but not all.
• Percent-based translation will still cause blurring with no easy workarounds (at least not that we've found yet).

[gfaceless]

@robertmesserle Since currently transform is used only for overlay centering, maybe other centering technique should be used instead.

Getting rid of transform could also make animation more flexible

[jelbourn]

Summing up status on this so far: this is caused by subpixel rendering in some browsers. Solution is to always round the transform values for overlay positions.

[jelbourn]

We should try out this trick with calc:
http://stackoverflow.com/questions/39099656/blurry-text-when-using-translatex-translatey-in-percentage-on-chrome

[quanterion]

I think it may work for even numbers of width and height only

[kherock]

@jelbourn Some warning about using calc there, IE/Edge can't animate properties with it. That won't be an issue though if the .md-overlay's transform isn't being animated anyway.

[jelbourn]

@crisbeto for connected position strategy, this should be as straightforward as calling Math.round on the translate values. For global position strategy, we may need to getBoundingClientRect after applying the percent translates and then reapply the rounded values (unless we can find a cleaner approach).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}