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.
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 have a problem with a web page I built that in iOS, not sure what versions, but I'm testing it on the new iPhone X(and newest iOS), it's possible to kind of resize the whole webpage.
I checked other regular sites and doesn't seem possible to do that.
So i'm guessing maybe some easy CSS can do that.
It looks like this (this is not my site, just another site that's it's possible to do it with)
It does not change my actual viewing of the site, I can only drag and move it, but when I let go, it goes back to the full screen.
You can see the movie here of how it moves: https://vimeo.com/263628559
I have fixed items on the screen, so it's not any particular div that it's been done too.
It was not that, I found a solution with jQuery
$(window).bind('touchmove',
function(e) {
e.preventDefault();
}
);
Good luck to all :)
What's the Problem:
Unfortunately I must use an Iframe in a web solution (tenant scoped SharePoint hosted App with App Parts).
The iframe needs around 50% of the website's space and the space for it in the host will be programmatically blown up in size so that there will be no scrolling bars shown. It works good on every browser except Safari. In Safari the touch event seems to be caught by the iframe window and will not be forwarded to the host window. Imagine this on the iPad: in over 50% of the page the user can't scroll down the page.
Hardware I used for testing:
Windows 8.1 (touch enabled screen) with latest version of Safari (5.1.7)
iPad with iOS version 8.4.1.
What I researched/tried so far:
This has nothing to do with everything that can be solved by "-webkit-overflow-scrolling: touch;" and similar approaches. From what I understood in my research, this will make the iframe scrollable but I need to make the host window scrollable when moving the finger in the iframe area. In other Browsers the iframe for example scrolls down until the end and then starts scrolling the host window
In some post one suggested to overlay the iframe with a div (z-index: 2) and then forward the click events from this overlaying div to the Iframe window ( I do have control on this Iframe window, so I can catch events in there). The overlaying div fixed the scrolling behaviour on my testing page but not in my target application, so it's not a reliable solution. Besides that: I managed the click event to be triggered (with same approach as in 3.) but could not manage to make it click links in my iframe-page (what I need... because this is the reason why I want the clicks to be forwarded.)
Another approach was to forward the touch events from the Iframe page to the host page. I did this via postMessages, JSON-stringified event parameters and a javascript library called "jquery.simulate.js" that is used to simulate touch events. I did not manage to trigger the touchmove event correctly on the parent window (and besides that I doubt that this is really good concerning user experience and performance)
I also thought about getting the simple html from the Iframe and add it to the host page programmatically. Unfortunately SharePoint hosted Apps are hosted on other subdomains, so due to the cross-browser restrictions I think is not worthid to follow.
Another approach was pointer-action: None; - This also breaks the link functionality and unfortunately worked only on the desktop
Setting scrolling="no" (or "yes") did not have any effect nowhere (maybe because it's gone in HTML5)
So here I am stuck... and it seems that no one else in this world has the same problem as I cannot find any really working idea anywhere. But I tested around 20 different websites with iframe - and I tested with the Desktop touch and the iPad.... and I have the same problem. I could not find a single Safari-Touch-working iframe throughout all suggestions and possible solutions.
How to reproduce:
A simple
<iframe src="http://www.w3schools.com"></iframe>
embedded on any html page with long content, Safari and a touch device (similar to the ones I used for testing) should be enough to reproduce.
What I want to know:
Does anyone have the same problem?
Could you put me into the right direction? I am actually unsure which of the above mentioned approaches I should continue to go on with
Do you have a completely new idea that I could follow?
Did you test this on any other device and know it's working? (I am thinking maybe downgrading could be a solution)
Edit: (Solution Nr. 2) The overlaying div makes the page indeed also scrollable in Safari, but I could not find the correct way how to forward the click event to the child successfully (meaning: which of the event parameters are necessary to be forwarded to trigger the click event in the child window?)
Edit: Searching again and found out that you cannot create events like clicking programmatically due to security reasons. Makes sense as this will be a big security issue if you could force the user to click on your ads for example.
How can I click on specific (x,y) coordinates on a web page?
I'm currently developing a site where I hide the header in mobile devices, it can be opened using a anchor with a jquery slideToggle function. Great stuff. Inside the header there's a search field and some other buttons.
However, when I focus the input on android and the virtual keyboard opens up my header closes. hiding the search field and everything else in it.
I have come to the conclusion that it is the keyboard that toggles this "bug".
Have anyone ever seen this before? I have no clue what I'm even looking for. Bloody android! :)
Thanks,
Robin
var searchToggle = $('.search-toggle'),
subHeader = $('.sub-header');
searchToggle.click(function(){
subHeader.slideToggle();
});
Problem solved. Found out that when the keyboard opens up the window trigger a resize function I used.
For a current project that i am working i encountered a small issue.
I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.
I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..
Can anybody give me some pointers and help or an example how i could possibly fix this?
Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):
Open video in modal window
The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:
<div class="hidden-on-desktop" id="modalWindow">Video here</div>
On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.
Hope this helps a bit :)