For the following code, it does not work on iOS Safari(iPad Air 2). It works everywhere else (Safari on Mac, Chrome on windows)
When I tried to debug the script below on the iPad's Safari (connected to Mac), it does not give any error. It is just silent. No speech.
Please not that this is the simple script, I created many others, such as setting up the voice etc.Nothing works..There is also a separate problem getting the voices, but I want to see if it works with the default voice first.
P.S. If I do XCode programming, using swift to develop native code on iPad (not in Safari), speech works on the iPad. But my goal is to create a web page using the Speech API
Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script>
function Speak() {
speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is my voice on a webpage"));
var speech = new SpeechSynthesisUtterance();
speech.text = "Hello";
speech.volume = 1; // 0 to 1
speech.rate = 1; // 0.1 to 9
speech.pitch = 1; // 0 to 2, 1=normal
speech.lang = "en-US";
speechSynthesis.speak(speech);
}
</script>
<a onclick="Speak()">ClickMe</a>
</body>
</html>
Check your volume, mute switch and make sure you don't have bluetooth headphones set up. It must also be within a click event (which you are doing). Try a normal video to make sure you get sound.
What made it work for me?
I went downstairs
I watched a video in Safari
I tried again and it worked
I then tried again and it worked
I tried again and it didn't work
I played a video again
It still didn't work
I force quit EVERYTHING
It then worked
And then it didn't
Then I realized I hadn't closed browser tabs
Then it worked
I think there's a bug (iOS11)
Related
my website has a responsive design that is perfectly rendered in all devices. However it doesn't work when I use Safari's remote debugging. These are the steps to reproduce the error:
I open my site from my iPhone's Safari and it looks as expected.
The site also works fine in a mobile size using Desktop Chrome, Firefox and Safari.
I plug my iPhone to the Mac and inspect the website using Safari's remote debugging inspector: Safari > Develop > My Iphone > www.mysite.com Immediately the iPhone renders a wrong design. Elements don't respect their CSS size settings.
I close the inspector and reload the site from the iPhone and the site is rendered perfectly.
I have the viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I have tried other alternatives but this does not seem to be the problem. I use SASS and my CSS files are minified. I suspect that there's something wrong related to SASS.
I will appreciate any suggestion.
Thank you
I updated to Mojave and the error has been fixed. I guess that something was wrong in my Safari.
tested on iPhone and iPad running iOS12, in chrome and safari
Bug description: after interacting (zooming in/out) with google map (integrated in the site by an iframe) on an iOS device (tested on iOS12) using either chrome or safari, clicking on links outside the map does nothing.
try it out here on codepen
interestengly enough, the bug doesn't happen in jsfiddle
here is a youtube video I made if you don't have an iOS device.
happens on my site which is a plain html page with google maps iframe like so (no other javascript, css files are added for testing purposes):
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12101.03207249142!2d-74.04012067655368!3d40.690314788042684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sus!4v1537933952825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
the above iframe is obtained straight from google maps "share > embed a map" feature.
Any clues how to get around this bug?
After some research, I have found a solution that works properly.
If you add an event listener to the body it will fix the problem.
document.body.addEventListener("fooAction", function(e) {
// something that does nothing
});
Last year webkit removed the 350ms delay for iOS. When I run my website in Safari's mobile browser, the delay no longer exists, and works as expected.
However, when I run my web application in standalone mode, the delay exists, and is blatantly obvious.
Here's my metatag that I'm using:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
I've tried variations of the sort, without luck.
It's hard to find anything about standalone applications, none-the-less this apparent issue.
Does anyone know why this 350ms delay click only occurs in standalone mode? As a workaround, I'm having to bring fastclick into the project, which isn't ideal.
Note: I'm running iOS 9.3.5 / iPhone 6
There seems to be no native workaround, and this appears to be a known issue, regardless of being fixed in webkit.
Begin Rant
Apples lack of support, and attention to detail for standalone apps is truly unbelievable; especially as of version 9.3.5.
Between this issue, and the major Youtube player issue on standalone apps. Perhaps Apple should stop worrying about removing the headphone jack, and adding some mystical "Touch Bar, and actually fix their damn platform.
End Rant
You'll have to use FastClick to solve the issue. Apply it only to iOS. You can go further, and only apply it to standalone apps, as it works fine if the app isn't in standalone.
My script tag is placed after the DOM, and the initialization looks like this:
if (isIos() && isRunningStandalone()) {
// Initialize Fast Click
// Even with the latest webkit updates, unfortunatley iOS standalone apps still have the 350ms click delay,
// so we need to bring in fastclick to alleviate this.
// See https://stackoverflow.com/questions/39951945/ios-standalone-app-300ms-click-delay
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}
}
isIos = function () {
// Reference: https://stackoverflow.com/questions/9038625/detect-if-device-is-ios#answer-9039885
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
};
isRunningStandalone = function () {
// Bullet proof way to check if iOS standalone
var isRunningiOSStandalone = window.navigator.standalone;
// Reliable way (in newer browsers) to check if Android standalone.
// https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile#answer-34516083
var isRunningAndroidStandalone = window.matchMedia('(display-mode: standalone)').matches;
return isRunningiOSStandalone || isRunningAndroidStandalone;
};
Apple recently released iOS 11 (11.2.6 in my case), with more support for progressive web apps (like reading manifest.json and other PWA features), and finally appears to have resolved this problem by no longer imposing the click delay.
There seems to run a different browser instance when you run it in standalone, probably an older version. Not known fix nor expected date either I am afraid.
As a workaround, you can try if ontouchend may work for your case
I'm trying to make an iOS Offline Web App (the web pages that are saved to the home screen and are a bit difficult to tell from native iOS apps).
My app consists of just two files:
index.html
<meta name="apple-mobile-web-app-capable" content="yes" />
<html manifest="cache.manifest">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
alert("Welcome to the site.");
});
</script>
</html>
cache.manifest
CACHE MANIFEST
# Version 0.0.2
If I navigate to the page in mobile Safari, it properly pops open the alert. If I put it into airplane mode, turn off wifi, force quit safari, and restart my iPhone, mobile Safari loads from the cache and pops open the alert just fine.
If I then save the page to my Home Screen (give it the name "Repo", for example), then attempt to open it, it'll pop open this error message:
Cannot Open Repo
Repo could not be opened because it is not connected to the Internet.
What's going on here? Why is mobile safari properly loading it from the cache, but the moment I try saving and opening it, it tells me it needs an Internet connection?
I have very bizarre problem. On mobile version of the website if I open it on desktop browser everything is fine, but when I open it on mobile browser I have some random numbers (781, 2e, 12e and so on) on some random areas.
AND this is happening on iphone 5S not on iphone 4s or 5!
even if I'm putting just pure html in it, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>blah blah in div</div>
<p>blah blah in paragraph</p>
</body>
</html>
still getting a unwanted 0 at the bottom:
I added this code
header("Cache-Control: no-transform");
at the very top of the page, even before:
<!DOCTYPE html>
and it worked!
We just noticed this same problem happening with the mobile version of all of our sites (thousands of sites). For us it appears to be happening on all devices, iphone & androids.
We tried the fix header("Cache-Control: no-transform"); and it does fix the issue.
** UPDATE: We have concluded this is some kind of proxy server issue by the mobile providers. When we switch to WIFI on both Android and Iphone the random characters disappear.