I have a page with a fixed div which is displayed at bottom of screen. When I put that page in iframe it has no issues while viewing in desktop
On desktop the yellow bar is coming at bottom without any issues:
https://jsfiddle.net/x1p4bf7j/12/
<iframe id="if1" src="https://fiddle.jshell.net/8ghsm1La/show/light/" />
but on iPad it doesn't the text just doesn't fit inside iframe. Below is the text how it is displayed in iPad
As you can see in the image there is no sticky footer coming. I want that to be at the bottom of my iPad.
The issue is how mobile safari renders iframes. It doesn't respect a height attribute, preferring to set the height of your iframe based on the height of your content. Personally, it makes sense when you think about how earlier versions of IOS handled overflowed scrolling (two finger scrolling) - Imagine an iframe that ALSO contained a scrollable element!
(A related stackoverflow here: iframe size with CSS on iOS)
Anyway, your "fixed" footer IS fixed - just at the bottom of a very large iframe.
Related
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
I have website that works well if opened in desktops and android device, but when I open in iOS devices such as Iphone and Ipad, the background did not fixed like on other devices, it will expand the background and create blank space on the right side of the page, and I used user-scalable=no to make user cant scrolling to the blank space, but still not works. Actually, I already use overflow-x: hidden; but my navbar didnt work like usual, the href didnt go to the target id. For example, news</li> it should go to the div id news, but it go randomly. So, what I should I use to prevent user to scroll in iOS?
this is the example of the blank space in iOS:
iOS safari has it's own set of issues. It generally tends to ignore all overflow: hidden you give on body and html. The only solution that i found till now was to either make you body exactly the size of your viewport and scroll the content within, or just make the position of the body fixed, in case your background is scrolling when you have a floating content on top that you want to scroll.
Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.
Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.
EDIT:
In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.
I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?
There is no reliable cross-browser way to do what you're looking for.
Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).
If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.
Native scrollbar styling is limited, but here is a demo of how to do it:
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
http://codepen.io/zakkain/pen/phjBC
Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.
If you want firefox, you'll have to go with a custom scrollbar replacer.
And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present
It works well, but most code pens can't show it, so you'll have to experiment on your own.
This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?
As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept #DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.
Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
I Have a problem with the zoom in on my site, it happens on both IE and Firefox. When I try to zoom in, the X-axis scroller appears at the bottom but the footer area (#content) doesn't show up across the screen when you scroll side ways.
Here is the link to the site: http://portfolio.htp.bcit.ca/akhodabandeh/portfolio_new_latest/
Thanks in advance
The actual problem is not with you footer, but with your banner. You assigned a fixed size here (1000px) which in zoom causes header menu overflow 100% width of pages. One solution would be to make banner with 100% dimension instead of absolute pixels (you might need to rewrite dimensions of inside elements for banner as well). Same for #btm_edge