I have looked around for a solution to this problem and although I have come across other people asking the same question , it seems answers for this issue are limited.
The Problem
The issue is that I have a overlay (slide-out from the side) menu which has a search box on it. I need to disable all body scroll so that the user can easily scroll around on the overlay without the body moving all over the place.
Solutions I have tried
The solution I have tried is from the link below
How to disable body scrolling when modal is open IOS only
This solution works great , when the sidebar shows up body scroll stops and when the sidebar disappears body scroll works again.
Whats wrong with the solution I have already found
Well , on Ipad when you click on a search box and the keyboard shows up for some reason body scrolling issue once again appears. If I get rid of the keyboard the problem is once again sorted.
Why is there no code on this page
I work with confidential data and the code is company property therefore this is not something I can post on here. Now I can mock up an example code which shows the issue however it would literally be a side bar with a search box and I dont think that would be useful however I may be wrong in which case I'm sure I can mock something up.
Apologies if the lack of code on this page offends anyone.
Related
SAFARI ONLY
I have encountered weird bug on desktop Safari.
I wanted to display modal after reaching some point when scrolling website. Unfortunately when we do that on safari modal is not clickable (z-index issue?). I've been using react + react-modal, but I think that this issue is not related to any of those.
Source code + demo: https://codesandbox.io/s/p5x9331y8x
I've noticed that when we wrap triggering function in setTimeout() we will be able to see that modal stops working only when it appear while scroll event. https://codesandbox.io/s/3q7rmpj1mq
Ofc setTimeout() is not a solution here...
I've found issues related to this but any of them is not matching my problem exactly:
https://github.com/reactjs/react-modal/issues/369
https://css-tricks.com/forums/topic/safari-for-ios-z-index-ordering-bug-while-scrolling-a-page-with-a-fixed-element/
Also when there is no overflow: hidden on body it works properly but thats not a solution here either (obviously we want to prevent background from scrolling).
Note: Regarding demo, modal appears after reaching last section of page (this problem is recreated). It's good to open page in full screen for testing.
Any help would be really appreciated.
Issue was solved by changing from overflow: hidden to overflow-y: hidden...
I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?
I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.
I have an application using jQuery Mobile.
When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.
When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.
I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.
Do you already seen this kind of error ?
Thanks by advance
I created a demo for you, as an alternative
I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.
Demo
https://jsfiddle.net/fyom081o/
Code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});
Please see the answer from when I raised this same question...
Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
It requires a lot of userAgent sniffing to make it work properly
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue
I'm not normally in a need to ask basic or vague JavaScript questions on SO, so pardon me if there is little details here - I'm not sure how to get more.
In the online user manual I'm maintaining, I'm adding custom buttons on each page to get a direct link to the current page (otherwise grabbing the URL just brings you to the home screen), as well as a few extra features. These buttons are added using Javascript, or rather they are already hidden in the HTML, are updated after an AJAX call and then displayed.
It has taken me a lot of work to get these working, in Firefox, Chrome, IE6, 7, 8, 9, I'm sure you know how these things go.
Now comes IE10 with yet another really weird behavior that I want to bang my head on the wall for. If you visit http://help.objectiflune.com/en/knowledgebase/ you will see those buttons on the right inside the main frame. They're grey and blue, top of the page.
So this first "welcome" page is fine, it works great, no issue. However, if you navigate to any sub page using the TOC on the left (such as Error Codes -> PlanetPress Design -> PlanetPress Design Error PXXXX), the buttons all disappear.
I've also noticed that if you get the URL for the page itself (inside the frame, again) and you open it in another tab, it first does not show them, but then refreshing the page makes the buttons appear.
I've tried using the F12 developper console, but it requires refreshing the page to show the console so I can`t use it in those new tabs. As for using within the whole frame system, it doesn't seem to be showing me any errors, nothing weird.
Again I'm sorry if this is an "it's not working" with no further technical details, but... there are none I know how to give.
UPDATE: For the specific code, please turn to http://help.objectiflune.com/common/scripts/olCommon.js , and look at the function starting at line 207 (function buildMenu()). this is the function that retrieves the information and displays the appropriate menus, such as $("#guidebuttons").show();
In ObjectifLune.css, #buttoncontainer has display: none. Navigating through the F12 window, the display of that object is none:
I would guess that somewhere in your JS, you're setting the display to block, but there's something wrong with that code in IE.
I'm working on a project at the moment where I've come up against a rather frustrating problem in Internet Explorer. I have a series of pop ups on a particular page that are opened with JavaScript when help links are clicked. The JavaScript for them is:
function openHelpPopUp(url) {
newwindow=window.open(url,'name','width=620,height=440');
if (window.focus) {newwindow.focus()}
return false;
}
The HTML used is:
Help
Now, the pop up works perfectly in every browser except Internet Explorer. The main priority at the moment is making it work in IE7.
What happens is that, it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible. Once you click away from the highlighted area to deselect it, it stays visible. Any area that wasn't highlighted stays invisible. When you refresh the pop up though, it sometimes becomes visible without any highlighting, it sometimes doesn't.
Also peculiar is that some text within an unordered list is visible, but when I use the same list encompass the rest of the text, it stays invisible bar the bit that was already visible.
Have you come across this or anything like it before? Have you got any tips or suggestions? I'm running out of things to try so any feedback or help on this is greatly appreciated!
By adding a z-index of 100 to every P tag for IE, I seem to have gotten it visible now. Weird. I haven't used any z-index's elsewhere and the structure of the HTML should put the P's on the top anyway.
Sounds like a browser bug.
What happens if you open the URL directly? Perhaps it's not popup related?
it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible
Sounds like it might be an IE7 variant Peekaboo bug, an IE rendering problem which is nothing to do with being opened in a pop-up. You'd have to show us the page that's being popped up to be sure though.
Whilst we're here:
if (window.focus) {newwindow.focus()}
Probably should be ‘if (newwindow.focus)’ assuming the aim is to avoid focusing a blocked ‘window.open()=null’.