I am creating an Instagram feed dynamically from AJAX. It wasn't 'rendering', so after researching I found the following answer
https://stackoverflow.com/a/27409565/3316722
which says, call this...
window.instgrm.Embeds.process()
I was excited when it worked on Chrome, but it did not work in Safari, either on desktop or mobile. I opened console log in Safari and ran that code, but it did nothing, whereas it works from Chrome console.
I thought it may be a dynamic issue, so I put the feed on a static page and the instagram posts are still not 'rendering' properly.
Lost entire day, can't find any more details. Help would be greatly appreciated.
It appears you must be logged in to Instagram on each browser in order for the rendering to work properly.
Related
I have tried pretty much every which way to configure the Google Invisible reCAPTCHA widget, but there is always an issue with the latest Firefox browser, detailed as follows:
add the plugin to a web page, which has other JS such as a dropdown menu
load the web page
keep loading the web page over and over, in an attempt to catch it 'half loaded'
eventually you will see for a split second an alert "The page at https://www.google.com says: Cannot contact reCAPTCHA. Check your connection and try again"
from now on, JavaScript is entirely broken until you restart the Firefox window
This never happens in Chrome, and appears to be Firefox only. I am surprised to not find any reports of this major issue with vendors Google and Firefox (unsure which party is to blame), so created this ticket.
This issue can be replicated on the official Google Invisible reCAPTCHA Demo by quickly reloading the page. This will eventually show the alert and break the entire demo, making all form inputs unresponsive until the Firefox window is closed and re-opened.
At the time of writing, I am using OSX Firefox 57.0.1 (64-bit) to replicate this issue, but has also been replicated on the same Firefox under Windows 10.
Update after valid comment from Federico, as this is being reported a lot but no solutions or workarounds that I can find: Google Groups Search
Is this a known issue and are there any plans to resolve from either Firefox or Google, or more importantly has anybody managed to put a workaround in place in the meantime?
I think the issue is resolved now. Try again and it is giving successful verification. I guess it was a bug which they fixed. If the problem still persists please try upgrading Firefox to the latest version.
First a little context. I'm a designer from the Netherlands with a love for code. I can find my way pretty ok in html and css and a little bit in php and javascript. I love the Stack Overflow community, it helped me so much and it still helps me every day in becoming a little bit better at coding!
I have never asked a question here at S.O. before, because I always found a way to solve problems, untill now. I literally tried everything and I really hope you guys can help me.
I have a hobby project: https://unboxguide.com
It is some kind of TripAdvisor for CrossFit Boxes (gym boxes).
It is a Wordpress website which uses several different plugins for some functionalities.
The site works perfect on desktop browsers like Chrome, Safari, Firefox, etc. No problem there.
Then on mobile, still no problem there. On Android with chrome, it works perfect, on iPhone with Safari, still shiny.
But then.... the horror starts.
The Facebook in-app browser. There is something completely weird there. If I post a link to the website on Facebook and you click on it in the Facebook app it will open the Facebook in-app browser. The website renders completely randomly. Sometimes it doesn't load fonts, or any of the layout (css). Sometimes it doesn't even load the images.
Some research taught me that it is some kind of webview of the internal Mobile OS browser. So on iPhone a webview of Safari and Android a webview of Chrome.
I tested the Facebook links on Android, no problems there. The problem only occurs in the Facebook app on iPhone.
If you want to see for yourself, post https://unboxguide.com on your Facebook (just do it privately, so only you can see it) and keep refreshing it. The more you refresh, the more random results you will get. It's so strange.
I've tried so many things: rebuild the whole CSS, killed all plugins, tried different themes and tried to build everything from scratch. I also tried different backups from a few months ago where (I thought) the problem didn't occur yet. Nothing helped.
I really really hope someone has had the same issue or understands the problem, and can help or point me in the right direction.
Thanks in advance!
PS: If anything is needed furthermore to help you guys figure out what the problem can be, please let me know and I can post more information.
Old question, late answer. If your website uses ajax and uses X-Requested-With header to detect ajax requests (or not) this could be the reason. Webviews most of time use the X-Requested-With header for something else, so your pages are displayed like Ajax results (without css, javascript etc) and not like full html page.
Hope this helps.
Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.
I've been racking my brain trying to figure this out since it hasn't been an issue with previous builds, but for the life of me cannot find an answer.
If you go to knitstitchmedia.com/sandbox/html/index.html in Chrome or Safari and input a zip code (just skip through the message pop-up box), you'll see the map loads with the store locations. However, this isn't working in Firefox and simply reloads the page.
I'm not sure if it's because I'm not using English in the XML and that's causing Firefox not to work. I do know that if there were an error in my XML entries, it wouldn't work in any browser; thus, I am completely confused on what the issue could be.
Thoughts? And, THANK YOU!
having a bit of a weird bug. This just started happening in the last 2 days with Chrome only -- the website works fine with Firefox/Opera/IE11 etc. I have no code that messes with the caching of my website to my knowledge.
I am using Google Polymer in order to load shadowDOM custom elements into my DOM. I have a script that still works fine for IE that detects whether the website is IE10 or below, and if it is, doesn't load the script, because if I load the platform.js in IE10 and below my website will just not load at all. Everything was working fine with the script until about 2 days ago when suddenly platform.js is not loading in Chrome, so none of my polymer elements are loading now UNLESS I shift+cmd+refresh my website, clearing the cache.
Was something updated with Chrome / Polymer in the last few days that would have broken this for some reason?
Has anyone encountered this kind of thing where a website will only work when you hard refresh it? I am so confused. Any help would be appreciated. Thanks!
Are you using Polymer 0.5.*? Because if so, you need to load webcomponents.js, not platform.js.