When there is an element with position: sticky, and user scrolls down on the page, the sticky element is a few pixels behind -being partially scrolled out of view, and eventually flickers back to the correct position when the scrolling is halted.
The same conditions as the linked issue above (Safari iOS only)
I made a small gif to visualize the issue. Pay attention at the top. There is a clear gap between the header and the top of the viewport. Almost the entire section-title is visible.
iPhone 13 mini iOS 16.1.2.
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.
Using an iPhone iOS10 in Safari, I can scroll the page and overflowed elements fine at 100% zoom.
When I zoom in, I can no longer scroll overflowed elements. The page is scrolled instead.
It appears that this issue occurs more frequently the further I've zoomed in. If I only zoom a bit, it happens less frequently.
I am using -webkit-overflow-scrolling: touch; Removing that property will cause undesired jumping on scroll.
I've tried adjusting the element's height to 100vh vs auto vs window.innerHeight, adjusted the z-index, set it to position:absolute;
Nothing is working! Again, this only happens on zoom. Scrolling works fine at 100%.
I've seen previous threads on this issue but no solutions so far:
iOS 8 Safari - Can't scroll element's content when page is zoomed
Is there a workaround for bug in Mobile Safari: Pinch to Zoom results in random scrolling blockage?
Issue scrolling div with Safari on iPhone 6+, iPad 3 when zoomed in
I found Intel's App-Framework to be light-weight and fast. However, I am facing a problem that I just can't seems to overcome. In the framework, one can display a navbar that 'stick' to the bottom of the screen. This work fine on the browser, WebView in Android and UIWebView in IOS - except on iPhone with 3.5" screen - the navbar just didn't show up. It appears that the screen is too short to show it.
I have tried playing with "viewport" meta tag by setting various 'height' and disabling & changing OS theme. Nothing works. Anyone has experience on this? How do I adjust the navbar position?
As it turns out, it is not the problem of App-Framework; it is the way UIWebView is placed on the view. After correctly setting UIWebView's top and bottom constraints, I am able to see the navbar correctly set at the bottom of the screen.
I am experiencing a crippling bug on iOS 6 and 7 with the TopBar and TabBar modules.
It appears that the view does not shrink, leaving the body at the same height as without it (example: 320 pixel phone screen, the body will still be 320 pixels).
Even an empty webpage will scroll, even if the body height is 0 (from Safari DOMInspector);
In addition, when we use angularjs to show our view, the first 20-30 pixels are "scrolled" behind the topbar until the user scrolls up.
Any idea?
I have had similar issues that trigger.io seems to just ignore. I have somewhat of a lengthy post on that issue and some others here
trigger.io topbar issue IOS
Maybe if enough people complain about it they will address the issue
On my ipad version of my site, if I scroll down to the bottom of my page, it keeps scrolling till the end of the body is about halfway up the ipad screen, so the top of half of the ipad screen is the end of my content and the bottom half is the default ipad background (gray fabric style background).
Is there any way to disable this?