This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
Related
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
I have one issue for iOS device when i focus on input cursor of input does not stay fix it scrolls with page scroll.
Added one solution for cursor issue but its behaviour is like when scroll page by dragging cursor moves and take it position again this small issue occurs other wise scrolling cursor is solved just need to check for another issue
First solution is give -webkit-overflow-scrolling: auto to scroll-content div but when its applying it cause hard scrolling
Second solution is disablescroll(true) to page but it gives current behaviour that is cursor moves and then get its position
Need better solution for this issue.
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.
Situation:
iOS 7.1
VoiceOver is Enabled
Hyperlink (<a href="#content">) points to:
target element on the page (<div id="content">page contents</div> or <a id="content"></a>)
URL I'm investigating: http://www.yooralla.com.au/whats-on/yooralla-media-awards/yooralla-media-awards-judges-pack
What happens:
Select and activate the link
A border appears on the target element (which is halfway down the screen)
The page scrolls so that the target element is at the top of the screen, but the border stays halfway down the screen.
The closest element to the border is then selected and bordered, so reading starts halfway down the page instead of at the target element.
Closest reference that I can find to this issue is item 1 here, so maybe it is fixed in iOS 8.
But I'm trying to work out why it's happening and how to avoid it on as many devices possible. I've tried linking both to the main content div (which fills most of the page), and inserting an empty a tag, both of which behave the same.
EDIT:
I've tried to force the reading position by setting focus or scrolling with JavaScript, but VoiceOver still ignores this and reads from the wrong place.
Situation:
Mobile phone equipped with jquery, jquery mobile, jquery-ui.touch and jquery.ui.touch-punch, the latter to make quite some things like drag/drop etc available for touch screens.
Two div blocks from which to drag bullets from one sortable div block into other sortable div block.
On the screen those two blocks are visually adjacent to one another to make things work although suboptimal, because bullet disappears when dragged into the other div block. Nevertheless it can be dropped somehow because afterwards bullets appear indeed in target div block and disappear in original div block.
With help of css option overflow: auto, one can make scrolling appear in both blocks to scroll through the list of bullets.
Problem:
These scrolling sometimes work and sometimes not because in the latter case either the whole page starts scrolling or (after clicking on local div scrollbar) it starts zooming-in to such a level/depth that the whole page becomes useless.
In Firefox Mobile div scrollbars not visible but scrolling sometimes possible; in Opera Mobile div scrollbars visible but at random "deeply" zooms in after clicking a div scrollbar.
Tried out different solutions given on the Internet to block page scrolling or zooming-in, but to no avail. Some "solutions" make page scroll is locked, but then either all scrolling is locked and/or dragging is also locked.
Question:
Anybody any experience with above situation or could give some hint? I know this is bleeding edge because even JQ/JQM (or any other framework?) has not reach this point at the moment, though they are working on it.
jquery.ui.touch-punch is a plugin, although experimental, itś the only way I know so far who make drag/drop etc available for mobiles/touchscreens.
Thank you very much in advance!