Safari iframe visibility hidden not working - javascript

I have an iframe and it's code is:
<iframe page_id="3" allowtransparency="true" src="https://www.mysite.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="visibility: hidden; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>
For some reason visibility: hidden is not working in Safari yet it is in Chrome and FF. I've never come across this before. It seems to be a new issue since this code is very very old. Any ideas?
I am not toggling display to avoid some other issues.
EDIT It looks like a Safari bug? http://jsfiddle.net/y2V3T/ v7.0.4

If visibility: hidden is not working you can also use opacity: 0;
The code would look like this:
<iframe page_id="3" allowtransparency="true" src="https://www.example.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="opacity: 0; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>

Let's see if this is a legit bug, as I think it is:
https://bugs.webkit.org/show_bug.cgi?id=134774

Related

Iframe fullscreen instead of scrolling?

I did search to see if there was already an answer and there are some related answers but the code is different. I'm honestly not sure if this is HTML or Javascript. I have no experience with web development.
So this is what is pasted to my WordPress website.
<iframe src="https:"some address" style="border:none; min-height: 700px; width: 1px; min-width: 100%; *width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" allowfullscreen></iframe>
scrolling
Try adding scrolling (scrolling="no") attribute to remove scrolling.
<iframe src="https://stackoverflow.com/" style="border:none; height:100vh; width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" scrolling="no" allowfullscreen></iframe>
as scrolling is deprecated I guess then we should go with CSS.
you can add this in your styleSheet or inside <style> tag in HTML page
iframe {
overflow-x:hidden;
overflow-Y:hidden;
}

How to force < iframe> to be sticky in on side on the HTML page?

I'm trying to make with google maps reference stick on the right side of my page I've tried this code still scrolls with the rest of the page
#map{
position: -webkit-sticky;
position: sticky;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
You are looking for position:fixed:
#map {
position: fixed;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Elements with position:fixed will stay in place when their parent element is scrolled.
This should stick your map to the top (I've added a div to be able to scroll down):
#map {
position: -webkit-sticky;
position: sticky;
top: 0;
}
div {
background-color: yellow;
height: 2000px;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div>Extra Space</div>
If you want to the right, right: amount should do the trick. left for left and bottom for bottom.
#Edit - I've found that setting right does not seem to be working. I've searched around and seems like there are several rules when it comes for something to be sticky. I haven't used sticky yet so I don't know if I'm just missing something. I apologize as my comment is most likely useless in your case.
You might want to check Interneting Is Hard if you want to learn more about positioning, though it does not have sticky, it should have enough for your needs without the use of sticky.
add
top:0;
in #map. this will stick the page at the top. This way you can user css position.
Make a sticky div before you insert your iframe in.
<div style="position:sticky; top:3vh;">
<iframe src="page.html"></iframe>
</div>

Iframe video controls not clickable?

i am using that example : https://codepen.io/cyborgspaceviking/pen/BdWagp#code-area
but beside using gif files i am using videos and loading them into iframe.
But video controls not clickable.
This is my replacing html with img tag:
<div class="resp-container">
<iframe class="resp-iframe video" id="gif_tv_video" scrolling="no" frameborder="0" allowfullscreen="1"
allow="autoplay; encrypted-media" src=""></iframe>
</div>
This is my codepen version link: https://codepen.io/affan-sheikh/pen/MWKggOe
from the preview you've posted, it looks like the img is above the iframe.
Try adding pointer-events:none; to every element above to make it not-clickable.
Check here for more details
It seems overlays are overlapping, try the following:
.gif-tv .viewport .pixels,
.gif-tv .viewport .meta-left,
.gif-tv .viewport .meta-right {
pointer-events: none;
}

positioning pop-up iframe according scrollTop of top window

I'm developing plugin which has some pop-up. Plugin is included on some page like iframe but with different domain. There is not allowed to do any other changes on that page except to add this iframe.
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
Pay attention that scrolling="no" and height is much bigger then heigh of page.
Pop-up should be vertically centered on the page when it appears, doesn't matter how much user scrolled down the page. See the pic
I tried $(top.window).scrollTop() but there is Cross-domain problem.
Is there any css trick to do this?
Thank you in advance.
You can try with transform: translate() function CSS
iframe {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

Hide container if DFP ad not loaded

I want to hide container based on google DFP ad is not loaded or not. I get Iframe body blank as shown below when ad is not loaded.
<iframe id="google_ads_iframe_/1009127/<id>_0__hidden__" name="google_ads_iframe_/1009127/<id>_0__hidden__" width="0" height="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border: 0px; vertical-align: bottom; visibility: hidden; display: none;" src="javascript:"<html><body style='background:transparent'></body></html>""></iframe>
You are looking to the collapseEmptyDivs method - this should do what you want.
This page should tell you everything you need to know: https://support.google.com/dfp_premium/answer/3072674?hl=en

Categories