Forcing GPU mode for better CSS Filter rendering on Retina. #9506
Conversation
| @@ -740,6 +740,7 @@ a, img { | |||
| padding: 4px 6px; | |||
| .sprite-icon(0, 0, 13px, 13px, "images/split-view-icons.svg"); | |||
| background-origin: content-box; // center image within the 13x13 area - ignore button's padding | |||
| -webkit-transform: translateZ(0); // forces GPU mode for better filter rending on retina | |||
There was a problem hiding this comment.
You are going to want to add an unprefixed version (transform: translateZ(0)) after this for multi-browser support, including Chrome 36.
|
@larz0 Scrolling speed seems good to me both with and without this change. The only difference I notice is that on Mac Retina I can throw scroll farther in a single throw with this change than I can in master. |
|
@redmunds cool. I've updated this PR based on @RaymondLim and @le717's feedback. |
|
@redmunds can we merge this? I'm taking screenshots on retina mbp and the icon is blurry. |
|
@LarZ Sorry, I forgot about this one. For future reference, put the milestone on the issue, not the pull request. Merging |
Forcing GPU mode for better CSS Filter rendering on Retina.
|
@redmunds ahh. I'll do that in the future 👍 |
| @@ -740,6 +740,8 @@ a, img { | |||
| padding: 4px 6px; | |||
| .sprite-icon(0, 0, 13px, 13px, "images/split-view-icons.svg"); | |||
| background-origin: content-box; // center image within the 13x13 area - ignore button's padding | |||
| -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina | |||
| transform: translateZ(0); // future proofing | |||
There was a problem hiding this comment.
@larz0 I'm curious why this particular SVG file (and we have many) renders more crisp with GPU enabled? Is there something about this image that's different?
Doing this effectively turns on hardware compositing for the entire page (making all compositing on the GPU and, thus, seemingly faster) so wouldn't it be logical and more readable to add the Null Transform Hack on the body style?
There was a problem hiding this comment.
It's because I used css filter on this icon and not on the others. This icon uses real drop shadow (filter) whereas the others use a fake shadow (duplicate icon path).
There was a problem hiding this comment.
Apparently we shouldn't force gpu everywhere. I'll let you know when I find that article.
This is a fix for #9377.
Scrolling is better now for some reason. (Possible fix for #9486?)