GraphiteEditor / GraphiteEditor/Graphite

Improve FloatingMenu CSS so it stays with its parent scroll

Ouverte
#634 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Web
Langage dominant
Rust
Étoiles
27.2k
Forks
1.3k
Merge moyen
20 h 5 min
PR mergées (30 j)
57

Description

Before 8bc85bd774ff3349bbdc5eb652643bf69fee83e4, the CSS was set up to make floating menus employ a clever but fragile arrangement of `position: flex`, `position: absolute`, `transform: translate(0)`, and other properties to make the elements stick to the bottom of their parent (without needing JS to position them) and also not get clipped by the `overflow: hidden` of their containing panel.

It was discovered that this arrangement did not hold up to the problem of scrolling the parent, such as the Properties panel containing widgets that spawn a floating menu (like ColorInput). 8bc85bd774ff3349bbdc5eb652643bf69fee83e4 used JS to fix this, but doing so has the drawback that it isn't recomputed automatically by the CSS engine when things change. Window resizes, scrolling the parent, and other changes can cause the position of the spawner to change but the JS won't update the floating menu.

When placing floating menus within other floating menus (specifically, a DropdownInput inside a DialogModal in #629), it became necessary to further complicate the JS logic by disabling the positioning behavior. But if a DialogModal ever has scrollable content in the future, disabling it won't fix the original scrolling problem.

If possible, investigate a primarily CSS-based solution that's robust to the challenges described above. Then revert the complex JS that was introduced in that commit. This might help: https://css-tricks.com/popping-hidden-overflow/

Additionally, Safari behaves differently and currently clips the floating menu within a scrollable panel (but not non-scrollable ones, it seems... or at least it does for the Properties panel but not the Document panel). And in Safari, our distance-to-edge measuring code also seems to calculate the edges wrong since the primary/secondary color picker swatch goes too low and cuts it off the bottom of the app. So another solution is needed for the problem as a whole, but it also needs to account for fixing these issues on Safari.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Piste de recherche

Examinez le commit 8bc85bd774ff3349bbdc5eb652643bf69fee83e et la logique de positionnement de FloatingMenu, y compris ses interactions avec les panneaux Properties, ColorInput, DropdownInput et DialogModal. Étudiez une approche principalement basée sur CSS qui reste correcte lors du défilement et du redimensionnement du parent, évite le rognage et fonctionne dans Safari ; le travail sera considéré comme terminé lorsque le JS complexe de positionnement pourra être reverti sans réintroduire ces problèmes.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, javascript
Domaine
frontend
Type d'issue
Bug
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.