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.
Related
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
When I open "inspect element" in right side of page it begins to small down, and whole style is out...
How can I stop it? Make it to become scrollable?
I tried adding to css:
html{
overflow: scroll;
}
But it didn't work...
You got any ideas?
You'll typically get a scroll bar when elements are fixed in size. Meaning they have a fixed width. Set your elements to a pixel value instead of percentages. Stackoverflow for example stays in place when i open the chrome inspector.
Note that this is very counter intuitive to that of responsive design. Your site should change size, and adapt to that of the screen.
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.
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.
The url is here http://teothemes.com/wp/viewpoint/. If you'll scroll a little bit to the content areas, the text will overflow with the header area, but once you stop scrolling, it dissapears. I tried editing the z-index, setting a background-color(thought it's because of the loading speed of the images), but it still doesn't work at all. This issue is related to ONLY iPad portrait mode and it works fine on any other browser.
Any help is greatly appreciated.
Mobile safari can have this effect when the Position property is not set correctly.
Try setting the overlapping div to:
Position: relative;
Again it's hard to say what elements property is not set correctly with no example code, but if you play around you will get there.