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
Related
I have a really big bug on the iphone, that makes a page unusable and I just can't solve it. I can't find any topic about this issue as well.
I have the following screen:
In the middle, there is a div, which is set on -webkit-overflow: auto; to have smooth scrolling inside this div. The scrolling is working absolutely fine and smooth.
BUT only until I do a touchmove on another element outside of this div. If I do this and try to scroll the scrollcontainer again, it's frozen and not moving at all. After I tap around a few times on the scroll container it's scrolling again.
It's losing the scroll focus of the scroll container and trying to scroll a parent.
So, if I do a movement like this:
This looks like this :
Note: I'm just doing one touchmove from the bottom container into the overflow div. After releasing the finger and then trying to scroll again, it still scrolls the parent div.
I made a short example, so you can have a look with your iphone/phone here.
This issue only appears when using -webkit-overflow: auto With normal overflow: scroll it's always working but yes... you know how laggy this scrolling feels.
Is there any way to force the scroll focus in the desired container, when you're clicking/tapping a container with -overflow-scrolling: touch;?
The iOS Safari Browser never really gives you full control over the scrolling.
However there is a "hack" you can use, it requires JS tho:
set position: fixed on body,html
As soon as a touchmove occurs, set the body.scrollTop = 0
So in your case add:
CSS
body, html {
margin: 0;
position: fixed;
}
JS
document.addEventListener('touchmove',function (){
document.body.scrollTop = 0
})
Example page for testing on device
Btw, a better way for handling this would be to make the headline/controls fixed and add a padding to the scrollcontainer. This wouldnt require any JS.
try it
I too had this issue, my website worked fine on android phones, but on ios, i had to tap few times, to activate scroll.
I tried disabling body scroll, even tried this
-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
I had to use custom scrollbar plugin mCustomScrollbar
This plugin completely overrides the system scroll. Here javascript controls the positioning of the scroll content. It makes the content position:relative and uses top to scroll the content.
If this plugin doesn't work for you, you can try any other scroll plugin. They all work the same way.
I am doing a popup light box by using the code I found in this article HTML / CSS Popup div on text click.
Now I am trying to disable the main scrolling of the page, since the light box has a fixed height, but certain pages are longer then the popup which leads to scrolling the background of the popup which in this case is the page itself.
I played a bit with overflow but without success.
Try the following CSS:
html {
height: 100%;
overflow: hidden;
}
Also, if you trigger this code on a random location in the page, you might need to do extra work.
Do you have a jsfiddle or codepen?
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'm trying to make the background image in divs scrollable (not fixed).
I've tried copying example 2: (usually works... e.g. IE9)
http://www.codertools.com/css_help_guide/css_background-attachment.aspx
Here is my version: (sometimes doesn't work)
http://sky-walker.net/temp/panning/panning2.html
I've basically copied and pasted the code (except for the path of the image file) but the background image stays fixed if I scroll the div...
I want the background image to scroll, like in example 2.
My problem happens in IE9 (Windows 7) and Chrome 12 (Windows 7 and Windows XP) but not IE6 (Windows XP).
In Chrome 12 for Vista the first link (example 2) doesn't work either.
Why should the background image scroll?
Both your examples work the same for me.
CSS2 specs:
If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background does not move with the element, and a 'scroll' background does not move with the scrolling mechanism.
CSS3 specs:
scroll
The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
The background does scroll with the viewport though.
Edit: I think what you really want is CSS3's local background-attachment:
local
The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents.
I'm posting this here because I recently had a situation that required me to "trick" older browsers into producing background-attachment: local-like behavior.
As this table points out, IE8 and Firefox don't support local, while IE6-7 get it right for the wrong reasons. With a little jQuery trickery (which can be rewritten in pure JavaScript by someone sufficiently determined), we can detect whether local is supported on the element and simulate the scrolling background if it isn't:
HTML:
<div id="main">
...
</div>
CSS:
#main {
background-attachment: local;
overflow: auto;
position: relative; /* IE7 wants this for unrelated reasons */
...
}
jQuery:
if ($('#main').css('background-attachment')!=="local") {
// will return the default value of 'scroll' in older browsers
$('#main').on('scroll',function() {
$main = $(this);
$main.css({
'background-attachment': 'fixed',
'background-position': '0px '+(0-$main.scrollTop())+'px'
// firefox doesn't support 'background-position-y'
});
});
}; // end if
CSS local is used if it's supported, and the JavaScript hack is only added if it's not.
See this question for why I had to add position: relative in the CSS.
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.