[Bug-12485] Accessing Inputs Forces Zoom On View When Using Mobile Devices

I must have missed or forgotten how to keep my view set to a specific size in perspective. When I click in the text field it zooms and then doesn’t zoom out until I do a “finger pinch” on the screen… Looking to keep the view anchored or relatively anchored so that it never has part “off screen” that I have to move and re-find.

Can someone please point me to the thread/manual notation that discusses it?

Is your VIEW zooming, or is it the TEXT FIELD? What Container type (Coordinate/Flex/Column)? Is it only at certain resolutions? Could you paste the offending View’s JSON here?

Logon.JSON (8.6 KB)
It seems like I missed “anchoring the corners”… the bar at the top ends up missing or can be “scrolled” away from even though there is nothing else to scroll to… I seem to remember reading something about this, but I can’t recall where.

From the look of it, you’ve defined a width for your “HeaderLabel” Label, and that width is wider than the containing View. No matter where you place the Label, it will now have content outside the boundaries of your View. Reduce the width of that Label, set the POSITION.x and POSITION.y to both be 0, and everything seems fine.

Hmm… still zooms when the text field is entered, then doesn’t always zoom out all the way when done…

Are you using a mobile device, or a desktop browser?
I tried Chrome, Firefox, an iPhone and an iPad, and none of those devices zoomed when I entered the Text Field.

using an 6th gen iPod touch with iOS version 12.1

Ah, I was finally able to replicate what you’re seeing.

I had to make your View thin enough that it would fully render in the viewport before I could see the zooming taking place because the original size of the View resulted in the View being partially zoomed by default. I’ll look into opening a new ticket for this.

It appears that this is not fixed with the last build…

wrapper logs after the last build installed…

2_7_19 wrapper logs.txt (50.9 KB)

We never declared this issue as being fixed. The internal ticket is still in our selection pool, awaiting a developer.

yep, just an update for you from my side

@brian.mills It sounds like we’re not going to fix this one because it’s how iOS handles inputs which have a font size of <16px. We would have to write special logic for every input to determine if the environment is iOS, and then determine what zoom level to return to when the user is done.

The recommended workaround is to modify props.style.fontSize for any input components you don’t want this behavior for to be >=16px. This might be better anyway, as smaller fonts on mobile devices aren’t so great.

1 Like

Hey @cmallonee,

I am on 8.0.14 and far as I can tell, this fix no longer works anymore. It seems like the font size changes but the input will still zoom in on iOS devices.

Is there a different way to workaround this in newer versions of Perspective?

Edit: I spoke too soon. On the Dropdown component with search enabled i needed this code snippet in my .css file

.ia_dropdown__search {
    font-size: 16px;
}

@cmallonee , Is this the same bug that I have been running into?
iOS device, XY Chart with a legend.
Font size on every possible style is 16px +
But when I click to disable a pen in the legend or click to see a value on the chart, it zooms in and never zooms back out, i have to manually zoom out.