Fix for blurry text and image on hover #413

Merged

akinwale merged 3 commits from ui-blur into master

2017-08-06 16:49:55 +02:00

akinwale commented

2017-07-31 21:47:14 +02:00

(Migrated from github.com)

Replaced translate3d with translateX in CSS since the cards only need to shift on the x-axis (horizontally). More details at https://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d.

akinwale commented

2017-07-31 23:06:23 +02:00

(Migrated from github.com)

Please hold off on this. Still seeing some issues on Windows.

kauffj commented

2017-08-02 00:39:26 +02:00

(Migrated from github.com)

If it's just the translate call causing the issue, could it be fixed by applying just the scale call and then a left or margin-left to adjust it's x positioning?

If it's just the `translate` call causing the issue, could it be fixed by applying just the `scale` call and then a `left` or `margin-left` to adjust it's x positioning?

kauffj commented

2017-08-02 00:40:13 +02:00

(Migrated from github.com)

Also, please include a comment with a link to the Stack Overflow post, so a future dev (or future @akinwale ! :) ) can change this when the root problem is addressed.

kauffj commented

2017-08-04 02:11:02 +02:00

(Migrated from github.com)

Any word on this @akinwale?

akinwale commented

2017-08-04 03:31:25 +02:00

(Migrated from github.com)

@kauffj I apologise for the lack of updates. I was a little under the weather up till Wednesday, and I haven't had a chance to look at it yet. I've seen some suggestions to use zoom instead of scale, so I'll try this out to see if it works.

MSFTserver commented

2017-08-05 01:41:51 +02:00

(Migrated from github.com)

you try using zoom instead?

akinwale commented

2017-08-05 07:26:16 +02:00

(Migrated from github.com)

Finally figured this out. I had to change the other translate3d call (in the class .card--link:hover ~ .card--link) to translateX since the cards only need to move on the x-axis. This apparently affected the rendering of the currently hovered card which resulted in the text still being blurry.

Finally figured this out. I had to change the other `translate3d` call (in the class `.card--link:hover ~ .card--link`) to `translateX` since the cards only need to move on the x-axis. This apparently affected the rendering of the currently hovered card which resulted in the text still being blurry.