@CCiufo-WMF - is this a codex issue?

In T388049#10654727, @JWheeler-WMF wrote:

@CCiufo-WMF - is this a codex issue?

Maybe, but it's likely a browser-specific issue. I think we've seen issues like this before but I can't reproduce it myself on macOS.

We'll discuss at our next triage meeting

Hey @Msz2001 and @JWheeler-WMF – I have a couple of additional questions about this scenario that might help us to triage things.

1. Roughly how many items are contained in these dropdown menus that are flickering and jumping around? Is it a very large number of items (like more than could fit on the screen)?
2. Do these menus set a visibleItemLimit option in their menu config? See https://doc.wikimedia.org/codex/latest/components/demos/menu.html#with-scrolling-enabled for details.

Thanks!

In T388049#10657996, @egardner wrote:

1. Roughly how many items are contained in these dropdown menus that are flickering and jumping around? Is it a very large number of items (like more than could fit on the screen)?

The video in the task description is taken from plwiki; the dropdown with duration has 15 items and the reason dropdown has 17 items.

I'd expect a similar number of items on wikis, however these lists are customizable through messages MediaWiki:Ipbreason-dropdown (reason presets) and MediaWiki:Ipboptions (duration presets). A simple scrapper could be used to generate statistics of how many items are set on wikis.

Change #1130154 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] useFloatingMenu: Ensure flip padding is less than size padding

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

Test wiki created on Patch demo by Eric C Gardner using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/0f335eff34/w/

I had some free time so I went ahead and investigated this. I believe I have found a solution:

Codex uses the FloatingUI library to handle positioning for menus and other similar components. We control menu behavior using a few different pieces of FloatingUI "middleware" – the relevant ones here are flip and size. We configure the behavior to work in the following way:

• Menus can shrink down to a minimum size (a height of 128px) as the user scrolls or resizes their viewport.
• Below that size, the menu flips if more space is available above the anchoring element than below it.

In both situations, we apply a certain amount of padding, because we we don't want the menu to collide with the edge of the viewport before shrinking or flipping – we want to keep it at least 16px away from the edge.

The problem was that we were using the same 16px padding value in for both flip and resize behavior. When these values are identical for both middleware, the decision of whether to resize or flip can oscillate, causing visible flickering.

Setting a slightly different padding value for flipping vs size is enough to solve the problem – even a 1px difference is enough.

I have created a PatchDemo instance to confirm this.

@Msz2001 or @JWheeler-WMF – if either of you could confirm that the problem is gone here, that would be great.

You can go to https://patchdemo.wmcloud.org/wikis/0f335eff34/wiki/Special:Block/Alice?title=Special:Block&usecodex=1, and log in as user Patch Demo using the standard PatchDemo password. Try clicking around on the menus at various viewport sizes, scrolling, etc. As far as I can see the issue is solved with this patch applied.

This patch can probably be included in the next Codex release, meaning it will be available in MediaWiki in about 2 weeks time.

I've just checked and the flickering effect is gone. Thanks for working on this!

Change #1130154 merged by jenkins-bot:

[design/codex@main] useFloatingMenu: Ensure flip padding is less than size padding

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

Change #1133258 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.21.1 to v1.22.0

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

Test wiki created on Patch demo by Eric C Gardner using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/59d55f2723/w/

Change #1133258 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.21.1 to v1.22.0

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

Test wiki on Patch demo by Eric C Gardner using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/59d55f2723/w/

Test wiki on Patch demo by Eric C Gardner using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org//wikis/0f335eff34/w/