This task aims to ensure the best possible GPU hack mixin code.
Documentation on which browsers are usefully affected by the `translate3d( 0, 0, 0 )` or `translateZ( 0 )` hack is not well-established:
Although Firefox seems to know GPU-accelerated composite layers for plugin content or `canvas` it's not entirely clear to me if `transform: translate3d( 0, 0, 0 )` triggers it in Gecko like it does in Chrome. If a trigger were in place, Firefox mobile could profit from it. Didn't find anything on Edge about the topic.
Safari and Chrome with Webkit rendering engine are the originally positively affected and Blink (current Chrome, Opera) also seems to take advantage of the same GPU compositing.
Anyways, as of [[ https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/src/styles/common.less;ba9f96b58b4fa2eb5bd2b3f63e69dbe2828e5059$37 | v0.18.2, we're using ]]
```lang=css
.oo-ui-force-webkit-gpu() {
-webkit-transform: translate3d( 0, 0, 0 );
}
```
Blink stated not to proceed with vendor prefixes, and although `-webkit-transform` seems to be continuously supported in Chrome 55 and Firefox [[ https://hacks.mozilla.org/2016/09/firefox-49-fixes-sites-designed-with-webkit-in-mind-and-more/ | maps -webkit-transform to transform since v49 ]] we should add unprefixed `transform` as well.
Another consideration for future might be using [[ https://drafts.csswg.org/css-will-change/ | will-change ]] in addition to the mixin. `will-change` support has been broadened:
> Chrome 36
> Firefox 38
> Opera 30
> Android Browser 40
> Chrome for Android 42
Related articles:
- https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
- Firefox 4: hardware acceleration https://hacks.mozilla.org/2010/09/hardware-acceleration/
- [[ https://msdn.microsoft.com/en-us/library/jj680148(v=vs.85).aspx | Rendering and Compositing in Internet Explorer 10 ]]
- https://stackoverflow.com/a/31538886/1696030