Fields don't allow user to type when CSS scaling is applied

hfinn shared this problem 3 years ago
Solved

We have come across a strange issue with this applet when it has been scaled using CSS transforms: https://www.geogebra.org/m/gvxVk8Tk

The number input fields on the right don't show the focus or the user typing into them when they are in fullscreen and the applet is scaled up using CSS transforms.

Video showing issue: https://s3.amazonaws.com/lz...

Comments (11)

photo
1

This is an older bug in Chrome/Safari, see https://bugs.chromium.org/p...=


You can avoid that by either not using overflow:hidden for any parent of GeoGebra applet (preferable) or by using zoom instead of transform.

photo
1

I checked a bit more if we can fix it on our end and couldn't find a solution. Please check if one of the workarounds suggested are possible to implement on your side.

photo
1

Hi Zbynek --

I'm picking-up this issue on our end.

zoom is worse than transform. None of the fields work—not even in regular (non-fullscreen) view.

Removing overflow:hidden makes the page look pretty bad because the widget has a lot of whitespace. Scrollbars are added and there are some other unpleasant visual side-effects.

I see you have classified the Chromium bug as a Windows bug. Could reclassifying it as multi-OS, macOS, or ChromeOS get it some more visibility?

Thanks,

Ian

photo
1

(Also, why is this issue in GeoGebra marked as "Not a Problem"? I think it should be classified as a problem with an upstream fix that needs to be followed-up on periodically.)

photo
1

> I see you have classified the Chromium bug as a Windows bug

I think Google have done that. The issue probably needs more "stars" to get their attention


> marked as "Not a Problem"

ie not a bug in GeoGebra

photo
1

I respectfully disagree. Geogebra functionality relying on a feature with a known bug on multiple platforms and browsers is a Geogebra bug.

photo
1

Workaround and some news here: https://bugs.chromium.org/p...

will-change: transform

This is the correct bug to track: https://bugs.chromium.org/p...

photo
1

Nice. It looks like if you have something like...

.gwt-SuggestBox.TextField {
  will-change: transform;
}
...it works around the bug.

What's the next step here? Are you going to update your code to include `will-change: transform` in DOM element styles as appropriate?

photo
1

Yes, we will do that soon!

photo
1

Great--thanks!

photo
photo
1

Your recent update/fix works great. Thank you!

© 2022 International GeoGebra Institute