Issue with ion-picker with custom phone font-size

Ionic Framework Ionic Angular
1

Hello,

I encounter an issue with the ion-picker on Android devices when the user set a bigger font-size in the settings of the phone.

So, when I go to a specific element in the ion-picker-column, the picker automatically goes to the above item (and continue till the top of the list) as you can see in the demo:

demo-ion-picker

Do you have encountered the same behavior? Is there a fix?

Thanks for your help,
Loïc

2

:right_arrow: I can see that there is an opened ticket in the Github issues of Ionic related to this here and there.

3

One way to “fix” this is to force the textZoom of the webview at 100% and so don’t apply changes related to user text settings:

File: MainActivity.java

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView webView = (WebView) this.bridge.getWebView();
    WebSettings webSettings = webView.getSettings();
    webSettings.setTextZoom(100); // ← Change automatic/user scalling.
  }
}

This is not very goof for accessibility because the settings will be skipped but this will ensure that the font-size defined in the code/styles will be used in the app/webview.

Does this seem like an okay approach to you or not?