It seems jQuery mobile and iframes don't play well.
Firstly, we know iframes are a bad idea - but in this case, we need to use it to load a form into our page - that has jQuery Mobile touch functions enabled.
Now, this works fine on all desktop devices, but on iOS - it seems when you select a form field that's in the iframe - and scroll - the form field loses focus and you can no longer enter text (even though the iOS keyboard is still visible). This is is a bit of a problem when there's a Captcha field in the form and users need to scroll to review the passphrase.
Any solution to this would be greatly appreciated! Thanks!
In ios Scroll bars in iframes are removed and render them as blocks. What I did for this solution is wrapping the Iframe inside a div and let the Iframe expand according to
<div id="myIframeParentDiv" class="myIframeParentDivClass">
<iframe style="z-index:2000" id="myIframe" width="100%" height="100%" src="" frameborder=0 ALLOWTRANSPARENCY="true" >
<p>Booking Engine error! your browser does not support iframes.</p>
</iframe>
</div>
STYLES
#myIframeParentDiv{
height: 100%;
width: 100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
Related
we use the Adsense "Auto Ads" and are generally very happy with it. Unfortunately we have a problem with the CLS (Cummulative Layout Shift) on our mobile (!) site. We have now tested this out and the problems are definitely triggered by the Auto Ads. After further testing, we were able to determine that it is specifically the sticky anchor ads in the header area of the page that trigger the CLS. Important: the shift does not happen when loading the page, but when scrolling down and up after the anchor ad has appeared at the top. At this point Adsense add some style attributes to all elements on our page, eg. "height: auto !important;" Does anyone also have this problem? What can we do? We would not like to go on without the sticky anchor ads. Important: Problem is mobile only! Is Google Adsense working on this? Thank you!
as google ads (especially the top anchor one) is ANIMATING the PADDING on BODY after you scroll down the page, the ad appears, and you scroll up, there is no way to avoid the CLS, only to create fixed
<style>
body {
padding: 120px 0px 0px !important;
}
</style>
so the once the ad appends its "style" with padding to body and starts to change it, nothing will happend due to "!important" tag in our style ... you can make an IF statement to use this only if your page is displayed on mobile (not sure this happens on wide PC anchors as well, have to test it, but I see my CLS going down on PC as well, so might be)
As there is no real way to "force" the size of auto ads in adsense
Set max height of Adsense responsive ad unit
for me i found out google allways delivers 300px high ads on mobile phones while 280px on tablets and desktop so i "reserve" this space in my responsive layout above the fold
with CSS as described here https://support.google.com/adsense/answer/9183363?hl=de here https://support.google.com/adsense/answer/9467650?hl=en-GB and here https://support.google.com/adsense/forum/AAAAKDuOfxQTiihLH_gMnw/?hl=en&gpf=%23!topic%2Fadsense%2FTiihLH_gMnw
.werbung { height: 300px; }
#media (min-width:800px) { .werbung { height: 280px; } }
#media (min-width:500px) { .werbung { height: 280px; } }
example:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-#####"
crossorigin="anonymous"></script>
<div class="werbung">
<ins class="adsbygoogle werbung"
style="display:block"
data-ad-client="ca-pub-#####"
data-ad-slot="#####"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
We had the same problem with Adsense injecting style: auto !important; - it was breaking our scroll and causing menus to display off screen on our mobile pages.
We solved it through the use of a little javascript that allows Adsense to load its ads with style: auto !important; and the script will quickly re-assign your div style back to how you need them to allow your page to operate normally. You can view the article here
Hope it helps.
The question has been asked prior but no clear response was obtained
I an using Facebook's plugin which lets one embed and promote any public Facebook Page on a website
I am trying to hide not remove the scroll bar from the side
I still want scroll functionality but I do not want the scrollbar to be visible
What is the best method to achieve this functionality
https://jsfiddle.net/wesuf2tq/1/
<md-card style="width:auto">
<md-card-header style="background-color: dodgerblue; font-size:15px;font-weight:600; color: white; ">
<i class="fa fa-facebook-square" aria-hidden="true" style="font-size:40px; margin:0 auto"></i>
</md-card-header>
<div class="facebookContainer" >
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FKobe%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
height="800" style="width:100%;border:none;overflow:hidden;"
scrolling="no" frameborder="0" allowTransparency="true"
allow="encrypted-media"></iframe>
</div>
</md-card>
There is absolutely no way to achieve this at all - the plugin loads its content into the iframe from a different origin, so the Same Origin Policy prevents you from accessing anything inside it via JavaScript, or to inject any custom styling.
You are limited to the configuration options Facebook offers here - and hiding the scrollbar is not one of them.
I've been looking for a way to fix this, by searching here, but no fix would work for it !
I'm running into an issue with Facebook iframe video integrated on my website ! (a blog)
It's displaying ok on desktop version but, when resizing the window, or going on mobile version, there is HUGE blank space created below the iframe. It is INSIDE the iframe and I have no control over it.
Desktop version looking fine
Mobile version with HUGE blank space below
Here is the iframe :
<iframe class="iframe" style="border: none; overflow: hidden;"
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fsalutparisfr%2Fvideos%2Fvb.1523831884576352%2F1642593346033538%2F%3Ftype%3D3&show_text=0&width=400"
width="600" height="460" frameborder="0" scrolling="no"
allowfullscreen="allowfullscreen"></iframe>
Here is the CSS code :
.iframe {
display: block;
margin: 0 auto;
}
Note: changing values in the iframe code didn't do the trick
Deleting all iframe css classes didn't do it either !
Tried changing the heigh value of the iframe to "100%", this is what it turned out :
Desktop version
Mobile version
It seems like facebook iframe is broken internally ?! My Vimeo and Youtube iframes work perfectly...
Any idea about this ?
Thanks !
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...
I'm using the following code for my like button
<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).
To work around this, create the element with javascript after the container is displayed, and then run:
FB.XFBML.parse();
Example:
result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();
This CSS solved it for me
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
This is still an issue, as can be seen here (also contains fix):
http://codepen.io/wiledal/pen/cGnyq
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.
.fb-like span, .fb-like iframe {
min-width: 100px !important;
min-height: 20px !important;
}
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
Can you try calling the like button like so:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
And let me know if you're still seeing issues.
Leaving an answer because I can't leave comments yet...
Oli's nice CSS hack looked like it worked initially:
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
but it clipped the comment box that tried to pop up when we actually clicked the like button.
Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:
<ul>
<li class="control_menu">
<span>menu name</span>
<ul style="display: none;">
<li><div class="fb-like-inactive" data-href=...></li>
...
</ul>
</li>
...
</ul>
with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:
$(document).ready(function() {
$('.fb-like-inactive').closest('.control_menu').hover(function() {
var inactive = $(this).find('.fb-like-inactive');
if (inactive.length && (typeof FB != 'undefined')) {
inactive.removeClass('fb-like-inactive').addClass('fb-like');
FB.XFBML.parse(this);
}
});
});
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
I hope this saves someone some time.
I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.
It may seems obvious but it will only work when rendering from a webserver.
Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:
html
<button class="like-button">I like this stuff</button>
<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>
CSS:
html body .aural {
position: absolute;
font-size: 0;
left: -9999px;
}
jQuery:
$('body').on("click", '.like-button', function(e) {
var $socialShare = $('.social-share');
$socialShare.css({'font-size':'1em'});
var sw = $socialShare.width();
$socialShare.animate({left: sw-80}, 400);
});
You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..
I had the same problem but the culprit was setting tracking protection in about:config to true.
This tip turned me on to the idea initially:
Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster
My solution is completely different to any of the above.
I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.
As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.
I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.