I have a left-hand navigation within my iFrame, with two items, switching between two pages. Sometimes there's a white flash, sometimes there isn't.
Some of the methods I've tried so far:
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';">
Did not do the trick.
jQuery('#jobs-frame').load(function(){
$(this).show();
});
jQuery('#primary a').click(function(){
//alert('hello');
jQuery('#jobs-frame').hide();
});
Also did not do the trick.
Any other method I've tried out has appeared to be outdated. What's puzzling me is that these above 2 solutions have many comments/feedback saying they work, but in Chrome - the only browser I've tested this in so far - I am still having this issue.
I had a similar problem with iframes that were dynamically generated. On Chrome, toggling visibility removed the white flash, but there was still flickering. On Safari, toggling display actually introduced a related iframe repaint bug.
What ended up working for me was toggling opacity:
<iframe style="opacity: 0;" onload="this.style.opacity = 1;">`
If you want to avoid the 'white flash', don't navigate using links to HTML pages, but put both pages into 2 <div>s and switch between them (this also allows for pretty animations).
Chris Coyier offers a very elegant solution that is better than putting visibility attributes. He has a good explanation why it is better but the short answer is "users with JavaScript turned off will never see that iframe" if you use visibility.
Here is his code. Put it in your <head> and make sure you combine the window.onload function with yours, if you already have one.
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
It works by inserting a CSS on the page, which makes all iframes invisible, so the whiteflash is not visible as well. When the window loads, the CSS is removed and all is well.
We should all thank him for this nice article, not me :).
just give style="background-color: #000000;" to html tag
Related
I have this code of an iframe displaying a google docs document:
<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;">
<iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe>
</div>
The iFrame works great and display the following iFrame:
Now i want to change the grey background as seen in the picture above into a white background color, i've been searching for a solution and i come up with this, but it's not working, the background turned white (with my custom css) but google docs didn't work and it displayed a message telling me "something went wrong" inside of the iFrame.
Does anybody know how can i change the grey background color ?
EDIT
It works on Google Chrome and Opera but not on Firefox nor Safari.
I can't say for certain whether this is the issue or not, but, because it's appearing differently in different browsers, I'm inclined to believe it's a matter of CSS normalizing/resetting. This answer has a script for doing that, and several more are in the comments, so I recommend checking it out.
Google docs is currently happy to serve published documents via CORS requests.
By placing the folowing script tag at the bottom of your <body>, all your google docs iframes will be replaced by plain divs containing your documents.
<script>
// get all iframes that were parsed before this tag
var iframes = document.getElementsByTagName("iframe");
for (let i = 0; i < iframes.length; i++) {
var url = iframes[i].getAttribute("src");
if (url.startsWith("https://docs.google.com/document/d/")) {
// create div and replace iframe
let d = document.createElement('div');
d.classList.add("embedded-doc"); // optional
iframes[i].parentElement.replaceChild(d, iframes[i]);
// CORS request
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
// display response
d.innerHTML = xhr.responseText;
};
xhr.send();
}
}
</script>
No more iframe restrictions. CSS will work as expected.
Following points can be noted in this scenario regarding styling the iframes:
You cannot style the iframe loaded from another domain (Cross domain).
A work around is there to style only the iframe block (Not iframe content) by giving the inline CSS to the iframe tag used.
You can find a hack for it by first fetching the content in your domain/server and then serving the iframe from there to make it from the same domain and hence stylable using the regular CSS and javascript.
Following link has more details and script examples which can be used in this scenario: How to apply CSS to iframe?
I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.
I found that
.ui-page { -webkit-backface-visibility: hidden; }
or setting the data-transition to none
or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file
helped.
But apparently that is only working if the webapp is just one "multi-page".
I am using 4 separate pages.
In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering.
But as soon as I add the App to to the Homescreen it flickers again.
Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J
Is there no solution for this?
Nothing answered so far worked for me.
I ended up binding a function to all links or elements which cause a page change.
In the function, i trigger the page change but explicitely tell it 'none' for the transition.
Here is an example:
Javscript (jQuery)
$('.item-navbar-people').on('tap', function (e) {
$.mobile.changePage("#page-people", { transition: "none" });
});
Markup
<div data-role="navbar">
<ul>
<li><a class="item-navbar-people ui-btn-active">People</a></li>
</ul>
</div>
Hope this helps!
Work-around Solution
So, these are the things I tried:
data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags
It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.
So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.
This is a known issue.
Disabling/Enabling zoom BEFORE each page transition will resolve the issue.
I figure out it, changing the scale of viewport meta tag.
Let's me clarify...
In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.01">
I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file
meta.attr( “content”, disabledZoom ); // just put // before the line
meta.attr( “content”, enabledZoom ); // just put // before the line
This will eliminate double flicks, also
set data-transition between pages to none
data-transition="none"
(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)
Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.
source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.
After linking to the .js file,
Add
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
to the head of your document.
Voila. That helped me, hope it helps you too!
I built a WordPress plugin for my company's customers and one of the options uses an iframe. A customer pointed out an interesting issue to me. When the page loads, it doesn't load at the top but loads just above the iframe (please see: http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/). The same thing happens on my test site, and in all browsers I've tested (i.e., chrome and firefox).
I've narrowed it down to the iframe, but it may also have something to do with the way WordPress treats iframes. This question is similar, but the answer given is to set display: none; which doesn't work because I need the iframe's contents to display.
Any suggestions?
Use the scrollTo function and put this bit of javascript at the end of your page.
I took this from Scrolling an iframe with javascript?
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
If jQuery is involved, you can use this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
I'd extend the scrollTo issue pointed by #stevepowell2000 and suggest that you examine all the scripts of that iframe, much probably there's a scrollTo going on there.
I found this in the iframe source, but am not sure if it's related or not...
$("#siteMasterPage").live('pageshow', function(event) {
var currentArea = $('#hidCurrentArea').val();
if (currentArea === "business") {
setTimeout(function() {
$.mobile.silentScroll(30);
}, 10);
}
});
If that's indeed the case, the matter would be how to prevent that, because applying a second scroll will probably look weird.
I ended up finding (two weeks later) the answer to this question. I took it from Nate's answer here - iframe on the page bottom: avoid automatic scroll of the page
I used:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>
It seems to have completely eliminated the scrolling issue.
Here was Nate's quote:
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
I'm creating a responsive design but have run into a problem where the Facebook Javascript SDK code's div#fb-root is causing a horizontal scrollbar when the browser width is less than 590px. I've tested this on Chrome, Safari, and Firefox, but the issue only occurs in Firefox.
Should I just set div#fb-root to display:none or is there a better way of doing it?
Thanks!
EDIT: As requested, the code below is how I'm loading the SDK. When I don't load the SDK, the horizontal scrollbars disappear.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxx', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
The display: none is completely OK, since that <div> is not used for showing anything, it's a placeholder where all the FB scripts can be loaded into and appended to your page
Setting display:none made the scrollbar disappear, but when I used FB.ui(), no dialog showed.
I managed to solve it by wrapping #fb-root in another div:
<div id="fbdiv" style="width:0px;height:0px"><div id="fb-root"></div></div>
placed at the end of the body tag.
Hope that helps somebody.
As a side note this .fb-root also breaks sticky footers implemented with html { height: 100%; } body { display: table; height: 100%; } and footer footer { display: 'table-row'; width: 100% }
Facebook should fix this.
The problem with hiding the fb-root div arises when you want to make use of the apprequests API call. This places the dialog for sending app requests to friends in the div. If the div is hidden, the request dialog will never be shown. I found out about this the hard way.
You could just try setting the width of the div on page load or something similar.
I have run into this same problem and tried a slew of different CSS tricks to fix it.
Setting the width of fb-root or container divs doesn't fix the problem. Neither does any form of overflow:hidden. The only thing that has worked for me is indeed making fb-root hidden as Zoltan said. After doing this I tested the button several different ways and I am not seeing any broken functionality using with this method at least for myself.
If their script button is going to break people's sites FB really should be fixing this issue on their end.
NOTE: Firefox is the only browser this problem comes up with.
Here (and in Firefox only) it just showed two small empty "iframe-ish" windows in the middle of my page.
I solved using display: none, but Facebook should definitely fix this issue.
You should also be able to do:
#fb-root {
position:absolute;
left:-9999em;
}
and not have it cause a horizontal scrollbar. If for some reason you don't want to use display: none; you could then move it back with JavaScript/jQuery if you really need it shown.
put this in your css
#fb-root {
position:absolute;
left:0;
top:0;
visibility:hidden;
}
Using css-transforms on a YouTube embed renders the video black in at least Safari 5 and Firefox 4. Chrome 11 handles it just fine.
I've made an example here: http://jsfiddle.net/oskarrough/4vRzd/4/
I need the css-transform in order to do some fancy layout positioning. Is there any way, css or js, to hack it to display the video?
I am tackling the same problem right now. I am not doing any fancy css transformations, just scaling.
Although not working perfectly, I got the video to display by using the wmode=transparent option.
i.e.
<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
Are you sure you can't use this instead:
iframe {
position: relative;
top: 100px
}
http://jsfiddle.net/4vRzd/5/
Or margin-top: 100px, or a negative margin on some other element?
Someone had to post this, because you didn't mention that they aren't viable options.
Upvote for lawrenceshen.
The wmode=transparent worked.
var player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady");
player = new YT.Player('gallery-youtube', {
height: '594',
width: '883',
videoId: 'u1zgFlCw8Aw',
playerVars: { "modestbranding":1, "wmode":"transparent" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
For me, this problem only occurred in Firefox 4+ on Windows 7 and Windows 8. It didn't happen on any other browser or on OS X.
I spent hours stuck on this problem. I display YouTube videos in a modal which uses CSS3 translations to slide into view.
My solution was to remove the transform/transition classes once the modal has appeared.
Once I did that YouTube embeds appeared and no more empty black box.
More details: I use animate.css and add class="animated fadeInDownBig" to slide the modal down. Once it has reached its final destination, I remove those classes again.
It's a really strange problem which I hope Mozilla fix really soon.