I'm having a problem, that iOS' and osx' voice over reads the <hr> tags of my website. I tried to not allow the user to tab to it with tabindex="-1" attribute, but seems like it is getting ignored and I can switch to my HR tag, and voice over reads it.
Any ideas?
(tried it on ios - safari & chrome, osx - safari & chrome)
Aight, found a solution, aria-hidden="true" for the elements I want to hide from the voice over works.
Related
We are currently developing a PWA for a client of ours. Everything has been going well, but while testing on iPhone (iOS 12.2) we are having an issue with the tags that have sms:123-456-7890 in the href. You get the "Safari cannot open this page because of the sms: tag" (paraphrasing).
If you are browsing the site via Safari (not in the PWA mode), the anchor tag works fine and your iMessage opens up with the number in it. But when you're in the PWA mode and click the link, you get a version of the message I mentioned above.
From doing research, this appears to be some sort of bug in the iOS 12.2 release, though not officially mentioned.
I'm curious if anyone has had any luck with a work-around for this issue?
Thanks in advance.
Edit..to add some code for the anchor tag....
123-456-7890
I've tried many different variations of the sms (with no // or ;), always same outcome when clicking it as a PWA. With Android, everything works fine in PWA mode.
I did find a workaround by using JavaScript
Code Example:
<a href="#" onclick="openSMSMobile();" >
function openSMSMobile(e) {
window.open('sms:1234567890', '_self');
return false;
}
And in case anyone is wondering, if you'd like to add text to the message body, you can use,
window.open('sms:1234567890&body=textGoesHere', '_self');
For Android you'll need,
window.open('sms:1234567890&body=textGoesHere', '_self');
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
});
I have a google map embedded in a Bootstrap site. I am busy testing on different mobile devices and when I am on iOS and I open the page with the embedded map on it, the maps app on the device is opened.
I don't think I am doing anything fancy, but I would just like it to stop. This does not occur on Android devices.
My HTML is as follows:
<section>
<div class="well well-sm">
<iframe width="100%" height="350" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=central%2Bpark&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>
</div>
</section>
This is the default behavior of iphone/ipad with regard to maps. To change the behavior follow these steps as stated in Google Support :
1.Visit the Search Settings page from your iPhone or iPad.
2.Scroll down to the "Google Maps" section.
3.Select Never use the native app.
4.Touch Save at the bottom of the page.
I have a web site built as a web app that contains a single 'select' menu. The menu works fine and the options are displayed when viewed in a browser including Mobile Safari on an iPad.
However viewing the web app with Guided Mode enabled (http://support.apple.com/kb/HT5509?viewlocale=en_US&locale=en_US) which prevents access to some iPad features, the tag stops working and won't open. A regular link using the 'a href' tag still works though.
Does anyone know why this particular tag is not working?
I've run into this same issue. It appears to be an iOS bug.
jQuery Mobile had a bug reported for this issue here: https://github.com/jquery/jquery-mobile/issues/6806
They solved it by coding around it, using hidden divs that are enabled by Javascript (See their custom select menu examples).
How do I debug my jquery mobile app on a windows phone?
My current problem is that a link like this does not work:
If I click on it, I see for a short moment a little black box (loding symbol?) but the app stays on the same page (div).
If I load the same page in the phones Internet Explorer it works.
How do I debug this?
Update
I updated to the latest jquery mobile version and now I get "Error Loading Page" like he is trying to load it as ajax but it is a multipage with the old rel="external" the error did not show up but it still did not work. (Same with jquery mobile 1.0.1)
Update 2
Creating a second page index2.html and setting a link like this works:
<a href="index2.html#next_collection" data-ajax="false" data-role="button" ...
But only if I use a different page. index.html#next_collection does nothing.
Try the Ripple mobile emulator. It has a setting for PhoneGap emulation.
Solved by updating from phonegap 1.3.0 to 1.4.1