An iframe that contains a photo slideshow breaks on Chrome - javascript

I have this weird problem and I can't seem to find what is wrong. Let me explain it step by step.
Here is the link to the slideshow that I developed: http://guusebump.com/view/lennie/weddings (PIN 1234). You click on Play and the slideshow will play with some music.
I've also developed a widget version for that slideshow, located at: http://guusebump.com/widget/lennie/weddings, which works fine as well.
Now, the problem is, I'm trying to plug that widget in another website using iframe:
<iframe width="900" height="600" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://guusebump.com/widget/lennie/weddings"></iframe>
But the slideshow wouldn't work on Chrome - it just won't work. Link: http://trisle.net/demoguuse/ (scroll down a bit to the widget). I tested the site on Safari and Firefox, it works for those browsers but not on Chrome. Not sure what will happen on your browsers, but I'm sure there's something wrong with the iframe.
What do you think? Any help would be much appreciated :)
-UPDATE-
The screen record of the error is: https://www.dropbox.com/s/j2ujp85y9fxxxz3/error_guuse.mov?dl=0

It sounds like you need to clear your browser cache. I have this problem from time to time with Chrome for some reason.
Steps to clear browser cache:
Press CTRL + SHIFT + DEL KEYS while you are in the Chrome browser.
Make sure the cached image and files option is check marked. It usually is by default.
Press Clear browsing data button and wait for it to complete.
Exit the browser and try reloading your application to see what happens.

This might be the security issue with chrome. I am asking the user to disable that and check.
It is working fine in my machine. I have windows 7 with chrome. It might be some issues with your Mac OS.
It might be security issues.
Please disable the security settings in chrome using the below command and just try
chrome --disable-web-security

Related

Youtube embedded video does not work on chrome

For months I've been noticing embedded youtube videos appear white on any other page, now I found out that I can watch those videos by inspecting the page and putting -nocookie at the hostname of the iframe src, i.e. https://www.youtube-nocookie.com/embed/(VIDEO_ID).
I want to know why this happen and how to fix it, my first thought was to make an userscript to change it in every page.
EDIT: It works fine on Edge and Firefox but not on Chrome, even though my settings for cookies are enabled.
SOLUTION: The problem was that my userscript on Tampermonkey extension (which was supposed to affect the youtube page) was affecting every page with an embedded video, from now on I can figure it out what part of the code was doing that but for now it's turned off.
Thanks to #JasonB for the suggestion about extensions.
This -nocookie url came out almost a decade ago when cookies were still often turned off. This codepen shows that the standard youtube embed code works just fine on a simple site.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/9Ht5RZpzPqw" frameborder="0"
gesture="media" allow="encrypted-media" allowfullscreen=""></iframe>
https://codepen.io/anon/pen/baqdGz
Are there any details about your domain or a link to a broken embedded video on your site that might help us better troubleshoot your issue?
The thumbnail worked just fine, I left it open for 5 minutes and then played the video, and that is all functional. Looks like there's one js error related to the codepen setup - not what you're experiencing.

Gif animation freeze in mac safari

I am working on this site "http://tinyurl.com/joblnmd". On home page there'gif animation, I've used preload method to load images, its working on all major browsers expect safari on Mac.
Is this bug in safari or is there any hack?
New Post: I've looked at the site again and there doesn't seem to be any problems. The loading hourglass appears for a long time, but it eventually disappears and the main content of the page is visible. It might be best for your to provide a JSFiddle with just the area in question so that I, or someone else, can have a proper look and help you solve your problem.
Old Post: Maybe you need to update your browser. My Mac Safari appears to show everything perfectly. But I'll check again later tonight. The animation looks very nice.

JavaScript for iPhone to open in Safari from non-default iOS browser

"googlechrome://www.lego.com" opened in mobile Safari will switch to Google Chrome iOS app to open the URL. This allows for scriptlets like the one below, which allows you to open the current page in Google Chrome iOS app, switching from mobile Safari:
(function()%7Bif(document.location.href.indexOf('http')===0)document.location.href=document.location.href.replace(/%5Ehttp/,'googlechrome');%7D)();
My question is, can the reverse be done? I tried "safari://www.lego.com", and it is simply an invalid URL. Can you make a scriptlet which switches from Google Chrome to mobile Safari to open the current page.
The answer is yes. Courtesy or MacStories (http://www.macstories.net/tutorials/chrome-for-ios-send-a-webpage-back-to-safari-via-bookmarklet/), I found this code:
window.location='googlechrome-x-callback://x-callback-url/open/?url='+encodeURIComponent(location.href)+'&x-source=Safari&x-success='+encodeURIComponent(location.href);
Execute that code, go to your homescreen, reopen Chrome, and there's a magical back button to go back to Safari. This may not be exactly what you want, but it works... Kink of.
Good luck!
Update:
Here's a screenshot:
Link (Sorry, I don't have enough reputation to put it right in the post): http://i.stack.imgur.com/OR175.jpg
Update:
It seems that the functionality to do this has broken. Thank you!

Weird flickering bug in the latest version of Chrome browser

After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.

Lightbox-style dialog shows below YouTube movie on Mac OS 10.6

This is a "but it works on my machine" one and could be tricky:
I have a lightbox-style HTML dialog that shows a menu on top of a web page. It can be injected into any web page via a JavaScript bookmarklet.
One of my users is trying to use it on YouTube.com with the result that the flash movie is rendered on top of the dialog (a div with high z-index).
I can't reproduce this. It works just fine for me. The dialog shows up on top of everything else on youtube.com, the video included.
I had him save the page in Safari as Webarchive and send it to me. Even that shows the menu rendered correctly for me.
I use the exact same version of Safari (4.0.5/531.22.7) and Flash (10.1 r53, latest beta). Only difference I could find is that he uses Snow Leopard (10.6.6) and I "only" 10.5.8.
Has anybody noticed similar problems? I'm afraid that the usual wmode recommendation won't solve this (I tried & it works on my machine anyway)...
Thanks!
Mark
Turned out to be a problem with the combination of Flash Beta and Mac OS 10.6. I had the user revert to the latest production release of the Flash player and everything worked as it was supposed to.

Categories