1

I have the following code for a React dropdown:

import Select from 'react-select';

const dropdownStyles = {
  control: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
  menu: base => ({
    ...base,
    fontSize: '1.8vh'
  }),
}

...

<Select
  className="dropdown-select"
  styles={dropdownStyles}
  options={this.options()}
  defaultValue={this.options()[0]}
  onChange={selection =>
    this.setState({'type': selection.value})
  } />

On my iPhone XS, in both Chrome and Safari, it zooms in when I press the dropdown to select a value.

I have tried multiple different solutions to get rid of this, based on other StackOverflow answers. I've added a meta tag to the page header to prevent zooming. I've manipulated the fontSize passed in to ensure it's greater than 16px. I've added a CSS rule for .Select input to change the font-size. Nothing worked.

Is there something unique about iPhone XS that breaks the solutions that worked before?

Andrew Latham
  • 5,762
  • 13
  • 43
  • 85
  • maybe try different meta tags from [here](https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page)? I mean are you sure you have the correct meta tag? – tanmay Jul 04 '20 at 17:35
  • Yeah neither nor the version with user-scalable set to 0 did anything. – Andrew Latham Jul 04 '20 at 17:55

2 Answers2

1

I've faced the similar problem with this scenario. If the font size you are using on react-select dropdown is < 16px then iOS will zoom to that input field. That is for accessibility reasons.

You can use something like this:

.dropdown-select__control.dropdown-select__control--is-focused {
    font-size: 16px !important;
}

and it should fix your problem.

Saurabh Sharma
  • 2,384
  • 4
  • 19
  • 37
0

Can you try using

@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .dropdown-select:focus, .dropdown-select .select__control input:focus {
     font-size: 1.8vh;
  }
}
harish kumar
  • 1,564
  • 1
  • 9
  • 18