I have a simple website containing 3 HTML pages but sometimes internal links on IOS Safari doesn't work correctly. Rather than rendering the page, it displays the 'Open in "Drive" screen with options to save page as a document. When I refresh the page it renders correctly again. This usually when I navigate around the pages quickly and I am not sure why this odd behavior and how to fix.
See a screenshot here https://ibb.co/bXxzZTS
Not sure if it is related but the DNS is via CloudFlare (Free) and the pages are really fast (as it's just HTML, CSS and JS).
I have only seen happen on iPhone Safari. Other devices I have checked on include iPad, MacBook, PC running browsers Chrome or Safari are all OK.
Additionally, I tried using URL with and without full domain with the same result.
I just expect the page to render as an HTML page.
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.
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
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.
I've been developing a mobile-biased web app which will have to load quickly on patchy 3G networks. As such I've been very economical with page weight. Now we're putting the finishing touches on the project I'm looking at adding a favicon, largely for the benefit of desktop users. Even though it will only be a few kilobytes I don't want this file to have any negative impact whatsoever on page loading, especially when it won't be much use to the majority of users.
If a user is using iOS safari, the Android Browser or Chrome on Android will the browser actually request the favicon, and if so is the favicon request deprioritized at all to make sure everything else loads first?
Just to clarify I'm talking about the favicon.ico file, not the apple-touch-icon mobile specific icons, which I assume to be loaded on demand (i.e. when you add a page to your home screen)
If you have a favicon.ico file with its declaration in the HTML code, iOS Safari and Android Chrome won't load it (tested on iPad Mini and Galaxy Nexus).
However, if you have Apple Touch icons, they will be loaded immediately by some browsers, not when the page is bookmarked or added to home screen:
iOS Safari waits for bookmark or add to home screen events. Good.
Android Chrome loads apple-touch-icon-152x152.png on page load. Arguable.
If network performance is a major issue to you, you should either study the behavior of various devices... or remove all the extra icons.
I am designing a bigcartel website and am receiving a weird browser-specific problem, on chrome, mozilla and some other browsers when on the website images on the products and the home page do not load correctly and are either slightly above or below where they should be. It is resolved by reloading a couple of times but obviously that isn't good. Here is the link to the website, and the source html replaces bigcartel variables so here is a whole .zip containing all page html and theme css.
https://mega.co.nz/#!aMoTEAwJ!CM6ZLyTMiY8YGWg3StH0xFNVNb89M2WTLkJ0khR-np8