I have an iframe with scrolling=yes. Is it possible to fully hide scrollbar using CSS for the Mozilla FireFox browser?
For instance, on the Internet Explorer I'm using this: Overflow-x: hidden; Overflow-y: hidden; - and it hides scrollbars, but FireFox ignores this CSS.
Here is screenshot from IE:
alt text http://moismski.com/ie.png
Here is screenshot from FireFox:
alt text http://moismski.com/firefox.png
I forgot to mention that I put CSS, to say exactly like this <style>body { overflow:hidden; }</style> inside the iframe. I can't put class to iframe itself like <iframe class="...">
Iframe is put inside the <DIV>...</DIV>. I use it like a modal window.
Have you tried setting explicit values for width/height on either the iframe or parent container? Also, does your iFrame contain anything?
EDIT:
Try:
div {overflow:hidden;}
div iframe {border:0;overflow:hidden;}
in your actual page that contains the div.
I've tried everything you said and looked at this two links either ( How to remove scrollbars from Facebook iFrame application - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
Related
Problem
Open https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/ on iPhone and the second iFrames div content ist not shown before tapping/scrolling.
Video: https://youtu.be/opEx0HMBvWc
Details
I have a widget <iframe> that is rendered below the page fold on page load.
<iframe class="iframe" src="widget.html"></iframe>
It is loading a site under my control, where I want a sticky/fixed element on top and momentum scrolled content below. Because of the fixed element I can not apply a wrapping div in the parent page and simulate the scrolling as described here https://stackoverflow.com/a/32993873/9619535.
The alternative is to make the iframe scrolling inside with position:fixed etc. as described here: https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535
But the content of this div is not rendered if the iFrame is out of view on page load. Only after the first touch the content appears:
https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6
Debugging
Using XCode Simulator the bug can also be reproduced. With Safari Inspect the element is there and all css seems fine:
Workarounds!?
The bug does not appear when using -webkit-overflow-scrolling: auto; instead of touch, but the momentum scrolling is desired / essential for the haptic usability.
Related questions
Also linked here: https://github.com/PierBover/ios-iframe-fix/issues/5
These solutions didn't help:
Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone -> webkit-transform: translate3d(0, 0, 0); did not change it
Safari ios iframe blank screen on rotate -> no display:flex is used
The problem came from https://github.com/PierBover/ios-iframe-fix 's position:fixed;top:0px etc.
The same can be achieved with height:100% on the wrapper, and than the bug doesn't occure:
.scrollable {
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
}
via https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios
First setting -webkit-overflow-scrolling: auto; and then switching to touch after the first touch seems to work 90%:
<script type="text/javascript">
const el = document.getElementsByClassName('scrollable')[0]
const settouch = (e) => el.style.webkitOverflowScrolling = 'touch'
el.addEventListener("touchend", settouch, false);
</script>
But 10%: if the iFrame is rendered below the fold and the user scrolls upwards where the iFrame does not react (already on top of page), the containing page will scroll, the touchend will fire and the div will not be rendered anymore.
See video here: https://youtu.be/opEx0HMBvWc
I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure
<div id="mainContent"> testlink</div>
<div id="theme"><img src="abc.jpg" /></div>
I am placing my theme behind my header bar by position:absolute and z-index:-1
Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can't use image as background as I have to make image path configurable (through infopath) and can't hardcode it in css.
In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari
Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question
If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don't need z-index then.
A simple example can be found here: jsFiddle example.
The css code being :
#theme {
position: absolute;
top:0;
left:0;
}
#mainContent {
position: absolute;
top:0;
left: 0;
}
Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.
I've ran into a nasty bug with Chrome and Safari on Mac. It appears that its related to font-smoothing and whether or not the page has an iframe with Flash inside of it.
When I remove the iframe the text looks like it is set to font-smoothing: subpixel-antialiased (browser default). But when the iframe is on the page (with Flash running inside of it) the text appears to be set to font-smoothing: antialiased.
Is there any work-around for this? Please see screenshots below.
I was having this problem too and fixed it like this:
.video1 { position: relative; height: 338px; width: 100%; }
.video1 > div { position: absolute; }
Then I placed the iFrame inside the second div. With the iFrame now in an absolutely positioned div, it no longer forces the text on the page to be antialiased upon page load in Safari.
I think I found an "ok" solution. I had a div that was slightly overlapping an iframe that had Flash inside of it. That overlapping div had it's font-smoothing screwed up. To fix it I just had to put z-index on both the iframe and the overlapping div. To make it work the iframe has to be on top of the div (higher z-index). In the example above it doesn't appear that anything is overlapping the iframe, but the boundary of each element could be overlapping slightly. You'd be able to see it by using the web inspector in Safari or Chrome. But I'd just start by putting z-index on the iframe and the elements that have messed up font-smoothing.
I have a lightbox at my website. It is a shadowbox script which opens me an iframe. The iframe has it's own scrollbars at the right. Is there any way to turn off the scrollbars from main/top window?
Maybe a overflow: visible or a overflow: hidden may work?
The overflow CSS property specifies what happens when the content inside the element overflows the element.
See this MDN page for more details
UPDATE: The OP has clarified.
You should use something like this:
#your-lightbox-box-which-has-scrollbars-which-you-do-not-want {
overflow: hidden;
}
I have used Accordion and Slideshow on my site.
http://www.delightbranding.com/
when you click Play. For some reason the scroll bar appears shifting the page.
Guess i am missing setting height for some div. Please help.
This one seems to be the bad apple:
<div class="control-next">
When the "Play" item is selected, this div expands below the HTML content, causing your page to grow.
Remove the height from .control-next css class
.control-next {
position:absolute;
right:0;
top:201px;
bottom:201px;
/*height:432px;*/
}
this is only happening for me in IE9 (I'd wager all versions of IE) and only when my browser window is short.
I tend to add a CSS rule to my html tag of
overflow-y: scroll;
Which places the scrollbar on the page always so that longer content doesn't make the browser behave inconsistently.
Not sure if this will help you in this case, but worth a try.