Fix overflow menu flickering on mobile (#31484) (#31488)

Backport #31484 by brechtvl

Co-authored-by: Brecht Van Lommel <brecht@blender.org>
This commit is contained in:
Giteabot 2024-06-26 01:13:04 +08:00 committed by GitHub
parent 1825c316a6
commit 58b1ee5ebd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -61,6 +61,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} }
const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space'); const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space');
const itemOverFlowMenuButton = this.querySelector('.overflow-menu-button');
// move items in tippy back into the menu items for subsequent measurement // move items in tippy back into the menu items for subsequent measurement
for (const item of this.tippyItems || []) { for (const item of this.tippyItems || []) {
@ -72,7 +73,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} }
// measure which items are partially outside the element and move them into the button menu // measure which items are partially outside the element and move them into the button menu
// flex space and overflow menu are excluded from measurement
itemFlexSpace?.style.setProperty('display', 'none', 'important'); itemFlexSpace?.style.setProperty('display', 'none', 'important');
itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important');
this.tippyItems = []; this.tippyItems = [];
const menuRight = this.offsetLeft + this.offsetWidth; const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space'); const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space');
@ -89,6 +92,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} }
} }
itemFlexSpace?.style.removeProperty('display'); itemFlexSpace?.style.removeProperty('display');
itemOverFlowMenuButton?.style.removeProperty('display');
// if there are no overflown items, remove any previously created button // if there are no overflown items, remove any previously created button
if (!this.tippyItems?.length) { if (!this.tippyItems?.length) {