Phone number links are opening a blank page on iPhone - html

I am working on a site and adding a clickable phone number. Clicking the number on mobile, pulls up the prompt to call the number, that part is working fine.
BUT it opens a blank page in the background when it should stay on that page. This happens on all browsers, Safari, Chrome, Brave, Firefox, etc.
I've tried adding/removing the dashes, adding/removing the country code, I've also tried this solution but no luck.
I'm on the latest iOS version, all browsers are up to date, at this point not sure if its an HTML issue, if it's missing an attribute, or something else entirely.
Any help is appreciated, thanks!
(888)888-8888

Related

Font Awesome Icons Behave Like Schrödinger's Cat on Mobile

I'm using Font Awesome 5 Free via a kit. On desktop, the icons work perfectly. But on mobile (iOS chrome (normal and incognito), iOS firefox focus, iOS safari), they behave like Schrödinger's cats...
On first page load, the icons appear. Tap reload and they disappear and are replaced by small squares. Tap reload again and they reappear. Every other tap of reload shows or hides the icons.
I notice the same behavior if I toggle back and forth between "request desktop site" and "request mobile site". (I'm not sure what's really going on under the hood there since the page renders the same either way.)
Since they do appear correctly, at least part of the time, I don't think it's a cross-origin problem or a caching problem.
An example page is here: https://onlinesafetyzone.com/learn/learning-zone.php
I've read many posts, here and on GitHub and none of the solutions has worked. Anyone have a clue what's going on?
It seems you have somekind of a XSS issue. I would try to download the fontawsome resources and deploy them with the application. Can be that they have a CDN problem, every second time the fonts break :| so maybe one of the nodes is flipping.

Can't click anywhere on my website from iPhone

I have one problem with my web site, if i open the website from any android device, everything is fine and the page work normal. But if i open the web site from my iPhone or any other iPhone (didn't try with other ios devices) i see the webpage, but i can't click anywhere. Can't click on links, button, input fields, images, can't select text or any other content in the page. It's like the page is one big image and can't do nothing there. I try with different browsers (safari, mozilla, chrome) from the iPhone and it's all the same. I don't know what to search exactly... If you need HTML or CSS code i can give you, but i have no idea where to start looking/fixing this problem or what cause it.

Safari on mobile devices detecting text field on entire webpage

I have found a very strange issue that seems to only affect iPhones/touch devices using the Safari browser.
When you load any page of our website, e.g. http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond.htm, tapping anywhere on the page brings up the keyboard as if it's detecting a text field.
I've done a lot of research but couldn't find anything on the subject or how to fix it. Anyone have ideas? Thanks!

Same CSS but different results for Chrome and Safari

I have a search element widget on the home page of my site. Inside the widget there are different tabs which represent search criteria. The issue is for those inner search tabs look different in Chrome and Safari.
I am attaching the screenshots for both the Chrome and Safari versions.
Chrome version (preferred version)
Safari version (would like to see it like it looks in Chrome)
I tried playing around with it but all my hacks did was break it and make it worse. Can this be changed in Safari at all. There isnt much to the html, css code so I dont really know why it screws up in Safari.
Here is the public link for the site:
http://kw-kw-sb-test-site.cs16.force.com/KWRI_Master_site
Any help and suggestion will be appreciated.
Thanks.
Does each one of the search criteria shift downward when selected? The image that replaces the text of the criteria might be set to vertical-align: bottom or some other type of affect on the image.

same page links in iphone mobile safari

Mine is something of a newbie question which I'm hoping someone can shed some light on.
I have a table of contents on my page, with titles which link to sections further down the page.
the targets are created like this;
<a name='appendix'>Appendix</a>
and the links are created like this;
<a href='#appendix'>Jump to Appendix</a>
Now when you tap on the link in iphone safari, it takes you straight there no problem. However if you scroll back to the top, to the ToC, and tap the same link again, the browser does nothing.
Looking at the url I can see #appendix on the end and I assume that tapping the link again, the iphone believes its already at that link, since the url already has #whatever on the end.
Normally I'd be happy to leave it that, but the iPad, Android and Blackberry all behave as I'd expect, ie no matter where you are on the page or whether you'd tapped on the same link previously, they jump to the target section.
One thing I'm thinking about trying is embedding the whole page in a frameset so its url never changes, although being a noob I've no idea whether that'll even work.
Has anyone come across this before? Any ideas?
Thanks
This appears to be an issue with iOS not you. If it has been working on all other devices I am afraid there is nothing you can do except report it to Apple. However, has your iPhone been acting crashy lately, and have you tried it on other iPhones?