I have a very strange image loading issue ...
I am struggling to debug this as it appears only on iPhone (tested using both Safari & Chrome) but works absolutely fine using an emulator (Chrome).
My images are loaded directly from the image folder (example) no angular rendering or dynamic src creation:
<div class="text-center">
<a href="https://www.chess.com/" target="_blank">
<img src="images/assets/chess.com.jpg" alt="" width="200px" height="80px">
</a>
</div>
The site can be found here: http://fantasychess.online/#/
This is not an attempt to spam my web link, I am simply struggling to identify the problem. Any assistance would be greatly appreciated, I have searched low and high for similar questions but nothing relevant was found.
Instead of src use Angular#ngSource
<img ng-src="images/assets/chess.com.jpg" alt="" width="200px" height="80px">
Related
When I click the AR quick look icon on my website it doesn’t show the 3d model and I get the message “object could not be opened”. The USDZ is currently hosted in a google bucket. Could the problem be with the way im hosting the USDZ? If so is there a recommend place for me to host USDZ files?
I'm posting this answer here since this question is the first Google result for the problem I had:
When referencing the usdz file exactly like Apple's documentation proposes, the AR button is rendered on top of the teaser image. When clicking the linked image, Safari opens the Quick Look screen, but the message "Object could not be opened." pops up. However, when I access the usdz file directly by its URL, the AR model does get rendered properly.
The problem was that the complete site was protected by HTTP Basic Auth configured with an .htaccess file. Apparently, Safari will not use the existing session to access the usdz file and thus the file cannot be loaded.
In my case, it helped to remove the HTTP Basic Auth protection from the site. As soon as the site was publicly accessible, the AR model could be loaded without any problems.
Hosting the USDZ file in a Google Storage bucket should work just fine, as long as the permissions on the bucket are set correctly so you can access the file. Safari will display the "Object could not be opened" message if there is any reason for not being able to open the USDZ file, and I haven't found a way to easily get more details than that.
Have you tried accessing the USDZ file url directly from Safari? It should show as zip file in the browser if the link, permissions, etc. is all correct.
Also, make sure that there isn't an issue with the USDZ file itself by downloading the USDZ file using the URL on a Mac and making sure that the file displays as expected in Quick Look in Finder.
If you can share some more details of what your code looks like and what you have tried it would be helpful. The minimal code that I used for testing is below and it works fine in Google Storage.
<html>
<body>
<a href="example.usdz" rel="ar">
<img src="example.png"/>
</a>
</body>
</html>
Embed a link to USDZ Files for direct AR-scenes usage.
Here's a code for multiple usdz files:
<html>
<head>
<meta charset="utf-8">
<title>Augmented Reality</title>
</head>
<body>
<div>
<a href="yourDirectory/ar_pixar_file_01.usdz" rel="ar">
<img src="ar_image_01.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_02.usdz" rel="ar">
<img src="ar_image_02.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_03.usdz" rel="ar">
<img src="ar_image_03.png" alt="AR Image" width="360" height="240">
</a>
</div>
</body>
</html>
The most important part of this code snippet is rel="ar" attribute, indicating that the link attached to the image is referring to content usable with the iOS AR-Viewer.
I have problems with rendering of my webpage in iOs using Angular 2/4/5.
A test page is: [REMOVED, I RESOLVED MY PROBLEM]
This page is displayed properly with all operative systems except iOs, I tried it with Android, Windows, with a lot of different browser and all it's ok, but with my iPhone or with my iPad the list of article is not loaded properly.
This page has this implementation for first article and similar for others:
<div class="row" *ngIf="articoli.length > 0">
<div class="col-md-12">
<app-news-card [articolo]="articoli[0]" [autore]="utenti[0]"></app-news-card>
</div>
</div>
In app-news-card component I have:
#Input() articolo: Articolo;
#Input() autore: Utente;
The news-card is built with Angular Material objects. I honestly don't think the problem is caused by this, in recent past I saw a similar situation caused by using *ngFor construct, so I can't understand where and what is the problem with iOs devices.
Somebody can help me?
I have a small extension im making for Umbraco, but i have run into an annoying problem. I have a small website i need to show in my backend of Umbraco. So i make my new section, and my new tree. Then in the edit.html file i simply insert the url to my website on my localhost. Everything works as expected, besides from the native spinner in umbraco wont stop spinning.
<div ng-controller="Netbase.Controller">
<div>
<h2>{{Title}}</h2>
<iframe src="http://localhost:64254/" id="contentPage" style="margin-left:15px;margin-right:15px" width="100%" height="100%" />
</div>
</div>
However, if i remove my iframe, everything works fine and the spinner is gone. It is umbraco that is showing the spinner.
My Angular controller is empty besides for me setting a title (that works fine).
I realize this is an old question, but maybe this will help someone else. The loading graphic is a background applied to all iframes by the Umbraco CSS. Here's how I handled it.
In the HTML for the iframe include the following attribute:
data-ng-init="iframeLoaded()"
Then in your controller:
$scope.iframeLoaded = function() {
$('#contentPage').css('background', 'none');
};
I pasted the Twitter generated code for an embedded timeline in a Text widget in WordPress. It causes a rendering issue in IE8 whereby links are being replaced by the tweet button.
Screenshot:
http://www.48thave.com/clients/ntp/shotshow/test-twitter.png
WordPress test page:
http://shotshow.com/test-twitter/
Code:
<a class="twitter-timeline" style="border:0" href="https://twitter.com/nssfshotshow" height="300" data-widget-id="336534911341166596" data-chrome="noheader nofooter noborders transparent">Tweets by #nssfshotshow</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Anyone have a solution?
Thanks!
This issue was resolved today by Twitter patching a recent release of their script.
https://dev.twitter.com/discussions/21893
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.