Elements inside an iframe are unable to be taped after the iframe is scrolled using window.scrollTo() or window.scrollBy()
Reproduction steps:
Visit https://victornpb.github.io/ios-scrollable-iframe-issue/
Click the buttons on the left, it changes color to show that it is working.
Click the "Scroll down" button and it scrolls the iframe down by 50 pixels.
After that the buttons doesn't work at all.
Screen capture video
It works fine on Desktop Safari, this issue only happens on Mobile Safari
I opened an issue on webkit repo here just in case.
iPhone iOS 12.1 (16B92)
I need to work around this limitation/bug, I can't add external scrolling though, because I need scroll events inside the iframe.
Related
I have created a responsive powerapp. For the screen I have set it's Height to Max(App.Height, App.DesignHeight) and it's Width to Max(App.Width, App.DesignWidth).
For troubleshooting purposes I added a label that shows the App.Width and App.Height values in my app.
When my app runs on an iOS device in Safari, which I've tried on iPhone 13 and iPad Pro 11", the reported screen size values are larger than the viewable screen in the browser causing the app to have to scroll up and down to see the entire screen. The size that is reported is actually the size of the viewable area in the browser if I collapse the browser bar (the bar with the back/forward button, address bar, etc.) at the top or bottom of the screen. When the browser bar is extended, which seems to be the default, or collapsed, the values for App.Height and App.Width do not change. However, I notice that on other, "longer" websites, the browser bar automatically collapses as I scroll up or down and reappears when I scroll the other direction. My PowerApp is not a scrollable screen and the browser bar never collapses. I'm sure this behavior is probably related to the problem.
Is there something I can do to make sure the App runs within the viewable area of the browser regardless of the state of the browser bar?
On a side note, it works perfectly fine in a browser window on my PC.
I have an issue with iOS devices when using the ionic 3 framework. Whenever I swipe up/down the app an empty space appears bellow/above the app. I attach an image that shows the empty space at the bottom while swiping up. Similar is for swiping down. I don't have this issue in android devices. How can a disable it?
It seems that using the property no-bounce in ion-content works
<ion-content no-bounce>
html content
</ion-content>
In iframe, if the user starts typing (keyboard open) screen got blur in iOS Device, it is not visible until unless user scrolls down & focus out the keyboard.
when keyboard press in ios device the iframe position varies, in my code i have written iframe position fixed with 100 vh but due position my ui get distort
Scnario :In Safari/Chrome in iOS 9.3.2 (I tested on iPhone 6s) clicking button while the input is focused, causes the iFrame to be removed, but the cursor stays blinking on screen. Furthermore, the keyboard stays open (clicking keys does nothing). After dismissing the keyboard, clicking anywhere else in the screen causes the keyboard to pop back again.
my issue got solved by body
html {height:100%; overflow-x:hidden }
may be it will help others
I'm building a mobile site with jQuery Mobile and use Photoswipe to open upp images from a slider.
The problem I have is that the pinch zoom works different if the mobile web site is opened in mobile Safari or from a home screen icon.
Scenario 1 - Open the website in mobile Safari.
Everything works fine, I can click on the image in the slider and the Photoswipe layer opens up. I can swipe and pinch zoom without any problems at all.
Scenario 2 - Open up the website from an home screen icon.
When I try to pinch zoom the image there is a black screen for som milliseconds then the image shows up. I can also see that something is loaded if I look on the topbar on the phone (where the icons for wifi etc. are placed) during the "black screen flicker". This doesn't happen in scenario 1.
I use the latest versions of jQuery mobile and PhotoSwipe.
Anyone with any clues of why it behaves differently?
Using the iOS Simulator and viewing a html page with a text box that has scrolling content, how do you use the mouse to scroll that text region?
On a real iOS device you simply press and hold and drag on the text box, but on the simulator doing that with a mouse scrolls the entire screen.
Because it is a simulator and not an emulator. You can use the simulator to 'test' how it looks like but you cannot test all of the features. The simulator is just an iframe sized to the resolution of an iPhone or whatever.