title: Google Transliterate API not working in mobile Chrome
body: <p>I have written a code that transliterates the textbox content into <code>Gujarati</code> using Google Transliterate API. It's working fine in the PC browser, it also works in the mobile browser UC browser. The problem I am facing is that, when I run the same code in the mobile Chrome browser, it doesn’t work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    // Load the Google Transliterate API
    google.load("elements", "1", {
      packages: "transliteration"
    });
  
    function onLoad() {
      var options = {
        sourceLanguage: 'en',
        destinationLanguage: ['gu'],
        transliterationEnabled: true
      };
      if (google.elements.transliteration.isBrowserCompatible()) {
        alert('compatible');
        var control = new google.elements.transliteration.TransliterationControl(options);
        var ids = ["idTitle", "idContent"];
        control.makeTransliteratable(ids);
      } else {
        alert('not compatible');
      }
    }
    google.setOnLoadCallback(onLoad);
  &lt;/script&gt;
  &lt;form action="index.php" method="post"&gt;
    &lt;label for="blogtitle"&gt;Title&lt;/label&gt;
    &lt;input type="text" id="idTitle" name="txtTitle" value="" required&gt;
    &lt;label for="content"&gt;Content&lt;/label&gt;
    &lt;textarea id="idContent" name="txtContent" required&gt; &lt;/textarea&gt;
    &lt;input name="btnAdd" type="submit" value="Add"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>