Search Unity

  1. We are migrating the Unity Forums to Unity Discussions. On July 12, the Unity Forums will become read-only.

    Please, do not make any changes to your username or email addresses at id.unity.com during this transition time.

    It's still possible to reply to existing private message conversations during the migration, but any new replies you post will be missing after the main migration is complete. We'll do our best to migrate these messages in a follow-up step.

    On July 15, Unity Discussions will become read-only until July 18, when the new design and the migrated forum contents will go live.


    Read our full announcement for more information and let us know if you have any questions.

Question Deactivate automatic zoom of iOS 15 on InputField in WebGL buld

Discussion in 'Web' started by ApacheOccidental, Apr 3, 2023.

  1. ApacheOccidental

    ApacheOccidental

    Joined:
    Jun 23, 2018
    Posts:
    2
    Hi folks,

    I have an issue with a WebGL build on iOS 15, but look okay on android and computer version.

    I can't seem to disable the automatic zoom that Safari applies to a legacy input field (Unity v 2022). I've already tried disabling it through meta filters in the HTML header, like on iOS 10.

    Code (HTML):
    1. < meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
    as well as through CSS:

    Code (CSS):
    1. input:focus { font-size: 16px!important}

    With no success.

    Any ideas?
     
  2. gtk2k

    gtk2k

    Joined:
    Aug 13, 2014
    Posts:
    295
    Code (JavaScript):
    1.  
    2. body {
    3.   touch-action: none;
    4. }
    5.  
    Is it possible to add this to CSS?
     
  3. ilezhnin

    ilezhnin

    Joined:
    Jul 17, 2013
    Posts:
    17
    No it doesn't work
     
  4. ilezhnin

    ilezhnin

    Joined:
    Jul 17, 2013
    Posts:
    17
    Faced the same problem. Did you manage to find a solution?
     
  5. ilezhnin

    ilezhnin

    Joined:
    Jul 17, 2013
    Posts:
    17
    I'm answering my own question. To fix this glitch, you need to add this block to the CSS/HTML web template you are using.

    Code (JavaScript):
    1. input[type="text"]
    2. {
    3.     /* enlarge by 16/12 = 133.33% */
    4.     border-radius: 6.666666667px;
    5.     font-size: 16px;
    6.     line-height: 26.666666667px;
    7.     padding: 6.666666667px;
    8.     width: 133.333333333%;
    9.  
    10.     /* scale down by 12/16 = 75% */
    11.     transform: scale(0.75);
    12.     transform-origin: left top;
    13.  
    14.     /* remove extra white space */
    15.     margin-bottom: -10px;
    16.     margin-right: -33.333333333%;
    17. }
     
  6. novosadvitalya

    novosadvitalya

    Joined:
    Nov 9, 2018
    Posts:
    8
    For me it's not working.
     
  7. Zaynull

    Zaynull

    Joined:
    Jan 21, 2022
    Posts:
    2
    any solution?