Page MenuHomePhabricator

Opacity bug on icons in Webkit/Blink
Open, LowPublic

Description

Setting opacity below 1 on icons results in a clipping of icons'/indicators' edge in Chrome under certain conditions.

There has been articles about Chrome and similar misbehaviour in Firefox.
I'm pretty sure, that I've come across such misbehaviour in production, but currently only one occasion is reproducible for me: Demo's icon section's IndicatorWidget in Chrome 62.0.3202.94 on Mac OS X on Retina display MacBook resolution. As soon as I switch to a different, external monitor (with higher resolution) the mis-rendering is gone as well.

Promoting elements with opacity property to a GPU composite layer seem to be a possible way out of this.

Event Timeline

Volker_E created this task.Dec 6 2017, 9:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 6 2017, 9:56 PM
Volker_E updated the task description. (Show Details)Dec 6 2017, 9:59 PM

We've already been filing similar issues at T64591: OOjs UI: Hovering icons makes them jump around 1-2px in Chrome. History repeating.

Volker_E updated the task description. (Show Details)Dec 6 2017, 10:25 PM
Volker_E renamed this task from Opacity transition bug on icons in Chrome to Opacity bug on icons in Chrome.Dec 6 2017, 11:05 PM
Volker_E updated the task description. (Show Details)

@Catrope Coming from our in-person chat, adding a default value under 1 doesn't solve the specific issue.

Change 395881 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] demos: Promote icons page Indicator to GPU layer

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

There are blurry lines around improving the situation here. Testing any icon/indicator usage on different solutions in browser Chrome 17/18/19/20 on Win 7 via BrowserStack didn't uncover any other problematic occasion – neither in OOUI nor in VE standalone demos. Let's just update comments in places aside of demos and put this on resolved instead of adding .oo-ui-force-gpu-composite-layer() to any time we touch opacity.
Related to T154460: Revisit OOUI's GPU hack mixin `transform: translate3d()`

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

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

Volker_E moved this task from Backlog to Reviewing on the OOUI board.Dec 7 2017, 3:52 AM

Change 395904 merged by jenkins-bot:
[oojs/ui@master] Clarify .oo-ui-force-gpu-composite-layer() mixin comment

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

Volker_E closed this task as Resolved.Dec 13 2017, 12:43 AM
Volker_E triaged this task as Low priority.
Volker_E moved this task from Reviewing to OOUI-0.25.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.25.0); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 395881 merged by jenkins-bot:
[oojs/ui@master] demos: Promote icons page IndicatorWidget to GPU layer

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

Volker_E added a comment.EditedJan 4 2018, 8:10 PM

With the new icons in https://gerrit.wikimedia.org/r/#/c/400091/ among them several circled ones taking up the full SVG canvas, I've been able to (non-reproducibly) see this happen again in Chrome 63/OS X for 'help' (in ButtonWidget framed), 'alert' and 'info' icon. Not re-opening yet until fully reproducible.
Way out would be promoting these instances too, but it's open if there are limits in GPU layer usage and if trying to be wittier than the browser itself on a large amount of layers won't open door for side-effects.

This also affects RCFilters background-color highlight circles.

Volker_E reopened this task as Open.Mar 20 2018, 7:01 AM

Re-opened with RCFilters issue and new icons set.

Change 416919 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Apply translateZ hack to full canvas icons

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

Change 416919 merged by Bartosz Dziewoński:
[oojs/ui@master] WikimediaUI theme: Apply translateZ hack to full canvas icons

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

matmarex closed this task as Resolved.Mar 26 2018, 7:04 PM
matmarex reopened this task as Open.Mar 26 2018, 7:24 PM
matmarex edited projects, added OOUI; removed OOUI (OOUI-0.26.0).

Apex is still affected, same for some indicator combinations in WikimediaUI.

With .oo-ui-buttonElement.oo-ui-iconElement .oo-ui-iconElement-icon, .oo-ui-buttonElement.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator we've got the elevate to GPU hack already 163 times in place in demos. One concern was extending this further to more elements might backlash in unforseeable ways on pages with a lot of icons and indicators on mobile.

Volker_E renamed this task from Opacity bug on icons in Chrome to Opacity bug on icons in Webkit/Blink.Mar 29 2018, 8:04 PM
Elitre added a subscriber: Elitre.EditedMar 29 2018, 8:06 PM

There you go:

<a class="mw-ui-button mw-ui-quiet" href="//www.mediawiki.org/w/index.php?title=Topic:U9s5xxu6hw5bu5id&amp;action=history" style="padding-left: 10px; padding-right: 0px;" title=""><span class="mw-ui-icon mw-ui-icon-before mw-ui-icon-clock"></span> History</a>

Thank you so much for looking into this, BTW, really appreciate how quickly you jumped on it!

Volker_E moved this task from Backlog to Next-up on the OOUI board.Apr 9 2018, 7:11 PM