search

phosphorjs / phosphor

The PhosphorJS Library
BSD 3-Clause "New" or "Revised" License
1.04k stars 166 forks source link

Applying zoom to parent of some phosphor widgets breaks mouse targeting #423

Closed aschlaep closed 4 years ago

aschlaep commented 4 years ago

I first found this in jupyterlab, but to reproduce with just phosphor widgets, apply zoom: 70% or similar to the body in this example: http://phosphorjs.github.io/examples/menus/

Next, try hovering and clicking on the menu bar or the tabs. The widgets seem to think that the mouse is to the left of where it actually is (when applying zoom >100%, to the right) for the hover and click effects.

sccolbert commented 4 years ago

Do all browsers exhibit the same behavior?

aschlaep commented 4 years ago

I originally tested it in Chrome, the behavior is very similar in Safari, the hover and click targeting in Edge seems to work with zoom, but in the menus example I linked above, the menu placement overlaps the menubar a bit. Firefox does not support the zoom property.

sccolbert commented 4 years ago

Firefox does not support the zoom property.

Maybe I'm thinking about something different. If I ctrl + wheel in FF, it will zoom. Are you talking about something different?

sccolbert commented 4 years ago

Are you talking about the non-standard zoom CSS property? https://css-tricks.com/almanac/properties/z/zoom/

If that's what you are talking about, we don't support that. It's non-standard.

aschlaep commented 4 years ago

Yes, that's what I was talking about. Didn't realize it was non-standard, sorry! Closing.