Page MenuHomePhabricator

Revisit OOUI's GPU hack mixin `transform: translate3d()`
Open, LowestPublic

Description

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 v0.18.2, we're using

.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 maps -webkit-transform to transform since v49 we should add unprefixed transform as well.

Another consideration for future might be using 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:

Event Timeline

Volker_E created this task.Jan 3 2017, 5:09 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 3 2017, 5:09 AM

Change 330344 had a related patch set uploaded (by VolkerE):
Improve and clarify GPU composite layer mixin

https://gerrit.wikimedia.org/r/330344

Volker_E moved this task from Backlog to Reviewing on the OOUI board.Jan 4 2017, 1:16 AM

Change 330344 merged by jenkins-bot:
Improve and clarify GPU composite layer mixin

https://gerrit.wikimedia.org/r/330344

Is this Resolved?

Yes, let's call it so. As long as we're careful with it's usage and decide case-by-case, and also keep an eye on will-transform usage out there.

Volker_E closed this task as Resolved.Jan 5 2017, 4:28 PM
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Reviewing to OOjs-UI-0.18.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.18.4); removed OOUI.
Volker_E reopened this task as Open.Dec 7 2017, 12:50 AM

Re-opening this to make it future-proof with will-change

Change 395905 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Extend .oo-ui-force-gpu-composite-layer() mixin by will-change

https://gerrit.wikimedia.org/r/395905

Change 395905 abandoned by VolkerE:
Extend .oo-ui-force-gpu-composite-layer() mixin by will-change

Reason:
Abandon, parts of this will probably be taken into a new mixin when needed.

https://gerrit.wikimedia.org/r/395905

[adding a non-archived project to this task]

Volker_E lowered the priority of this task from Medium to Lowest.Jan 22 2018, 8:58 PM
Volker_E renamed this task from Revisit OOjs UI's GPU hack mixin `transform: translate3d()` to Revisit OOUI's GPU hack mixin `transform: translate3d()`.Mar 20 2018, 1:33 AM

Nice write-up on [[ http://dassur.ma/things/forcing-layers/ | side-effects of will-change ]] and the author's summary

For now, we only have will-change and my advice is: Use will-change: opacity or backface-visibility: hidden to force an element onto its own layer as it seems like the side-effects are the most unlikely to be a problem. Only if you are truly going to change the transform should you be using will-change: transform.

Volker_E updated the task description. (Show Details)Jun 5 2020, 6:03 AM
Aklapper removed Volker_E as the assignee of this task.Jun 19 2020, 4:30 PM

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)

Krinkle removed a subscriber: Krinkle.Jun 19 2020, 6:45 PM