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;
}
Related
I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?
Similar problem arises when I am using a custom dropdown Selectric
I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.
I also faced same issue and resolved it as below solution , you can try it.
datepicker has beforeShow property where you have to set calendar position.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
});
}, 1);
}
});
Try this
.dropdown-menu{
position: fixed!important
}
This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:
You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).
Add to your css for that class (here modal-open) the missing show command:
body.modal-open {
overflow: visible;
}
Now the scroll should stay in place.
Example refers to html like:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Source:
Bootstrap modal: background jumps to top on toggle
PS. My source has also 18 other options, if this seems too hacky.
I have made this current one once, worked like charm and was not so tricky to do.
just add This CSS code to your site it will fix that issue.
.element{
position: sticky!important;
}
If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.
You can do this by adding this line of CSS code:
.dropdown-menu {
position: sticky;
}
Hope that will help you
As a start, have you looked thru the GH repo's issues for something matching your description?
This link specifically sounds promising:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866
I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".
So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).
Also there seems to be some default mobile behavior related to scrolling:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Perhaps setting the following will help:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
The following link provides more context on this scrolling behavior:
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:
So I tried different things like changing the position of .pac-container but it doesn't solve the problem.
When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.
I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ?
(It's actually just a simple code like this:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
options
);
}
initialize();
jsfiddle
Thanks
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){
//Set new top to autocomplete dropdown
newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
$('.pac-container').css('top', newTop + 'px');
});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent()
.css({position: "relative"})
.append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout
.pac-container {
top: 40px !important;
left: 0px !important;
}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.
I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.
I got the solution checking the example provided by the Google team.
I've updated your fiddle to match the solution, but it goes like this:
Your updated CSS:
.box {
position: relative;
height: 200vh;
}
#autocomplete {
width:350px;
position: absolute;
}
Since my input field is inside "ion-content", I implemented Nicolas Pennesi
's answer with ion-content's method:
onScroll($event) {
// his code here
}
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 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