Our site runs on WordPress. On this page we have a series of text widgets, each containing a chunk of HTML and inline CSS. It's a bit crude, but it allows us to provide our marketing people with a simple template they can use to add a new item.
Each item is a link wrapped around an image, an h1 and some p tags. We're getting a really weird issue on iOS. The link is supposed to open a new browser window. When we're on an iPhone 4 and tap on some of the links - like the top two examples currently on the page - nine times out of ten we briefly get a tiny loading icon in the iOS top status bar, then nothing else. The only way to get the link to respond is to tap and hold till you get Safari's Open/Open in New Page dialogue. On the other hand, when we tap on some of the other links the new window opens straight away as you'd expect. You should see what I mean if you try that on an iPhone 4.
I've carefully compared the HTML for the items that work properly, and the dodgy ones, and they seem to be pretty much identical, apart from content differences. Here's an example of markup that works OK:
<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
<a target="_blank" href="http://yourworld.metro.co.uk/" style="text-decoration:none;color:#333333;font-family:Arial, Helvetica;">
<img src="http://metrouk2.files.wordpress.com/2013/07/ay_113922733.jpg" style="float:left;margin-right:6px;" alt="directline" />
<h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN PRIZES WITH YOUR PICS!</h1>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every week in Metro’s Your World we'll set you a photo challenge and feature the best submissions in our digital editions. And, for the whole of July we're giving away Samsung Galaxy cameras AND Amazon vouchers for the best photos! Check out this week’s challenge and submit your photos here.</p>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>
</a>
</div>
and here's one that has the weird behaviour:
<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
<a target="_blank" href="http://intu.co.uk/lakeside/competition/metro" style="display:block;text-decoration:none;color:#333333;font-family:Arial, Helvetica;">
<img src="http://metrouk2.files.wordpress.com/2013/11/comp-module.jpg" style="float:left;margin-right:6px;" alt="directline" />
<h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN £2,000 to spend at intu Lakeside</h1>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every day this week, Metro is teaming up with intu Lakeside shopping centre to offer five lucky readers the chance to win a gift card with a whopping £2,000 to spend at the centre. For your chance to win, click here. Competition opens Monday 2nd December.</p>
<p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>
</a>
</div>
Can anyone explain this bizarre situation or suggest a fix? I've been noticing a similar issue on other links. Maybe this is an iOS bug?
===============
EDIT
I should mention I've tried changing the order of the items in the list in case there was some invisible element on the page that was obstructing the touch event. I've also added the same items to a dummy list on my test WordPress site. And I've tried changing the CSS, including the overflow style on the container, and the text in the h1 and p tags. All with no change to the behaviour.
===============
EDIT
This has something to do with the href of the link. When I change the href of the dodgy item to the same as the good item it suddenly works fine. Bizarrely, when I change the href to http://google.com, http://yahoo.com or http://bbc.co.uk it stops working. When I set it to http://metro.co.uk it works. WTF???
We seem to have found the answer to this - iOS Safari's popup blocker is blocking the links. A colleague tried the same page on his iPhone 5S and encountered the same behaviour. He also noticed that his desktop Chrome was blocking popups when he tried the links there. When I turned off popup blocking in iOS Safari they worked fine. Also, when I removed the target="_blank" attribute from the links they worked fine with popup blocking on. Adding target="_blank" to the links with JavaScript didn't help.
The conclusion from this experience is that iOS Safari blocks external links with a _blank target.
On iOS, Safari mobile renders the content. Its behavior is very different from the desktop safari.
I'm thinking the errors begin with using commands the mobile safari can't understand. In your code overflow:auto is one of them.
But see the accepted solution for that here: Overflow-x value ignored in mobile safari
Also if you're using javascript note not all events are handled by the mobile safari. If you're noticing strange behavior, i would start my investigation around these issues first. For eg. some events are not firing at all or they're firing instantly because they're not implemented. It's a really deep bunny hole imho.
I hope it helps a little.
Related
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.
What has happened with code that now SOME right side up images are displaying online upside down even when the code is exactly the same for all images?
I have been a web designer for a million years and I have never had this happen before. I've got it on 2 websites with different code. 1 is just an img tag and the other is an animated gallery. In both cases SOME photos are displaying upside down while others are not, and they are all right side up in real life on the computer.
The upside down thing is happening in Chrome and Safari but not on the iPhone.
Here's code:
Could not possibly get any simpler.
<body class="loading">
<div class="page">
<img src="images/Ralphs-sons.jpg" alt="family portrait painting of kids" border="0">
Is there a code to lock the orientation so it cannot be flipped by whatever insanity the gurus who break the wheel have done now?
I saw a post about orientation but it didn't make sense for this since I am not doing anything special here and that code was supposed to be to fix a problem in only one web browser, not lock it for all browsers...
I solved the problem with a workaround. I opened the image in Photoshop and saved it from Photoshop so that it is no longer merely recognized by browsers as a photo saved from a camera.
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
i am currently at college studying web design and devolpment, i am working on my portfolio and creating a website for someone, (unfinished) if you go to this link.
http://www.mattwoodsfitnessandweightloss.co.uk/
and randomly click a few links [ Home page / About / Our Studio ] multiple times etc you will notice the "about matt woods" sometimes jumps out of the table or completley dissapears all together, i didnt notice it on Firefox because it dosent happen but checked on IE and it seems to only happen on IE, its also happening on a friends IE so its not just mine.
EDIT: here are some screenshots:
Can anyone help?
Cheers.
Different browser's render the padding and width of the html element differently. so if you want a consistent look across all the browser you should consider adding a reset style sheet to your page.
Download the following stylesheet Download and add it to your webpage.
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?