When I slowly scroll my website www.teamstack.net on iPhone, the iOS address bar is either enlarging or reducing (depending on scrolling down or up). When the adress bar is finished enlarging or reducing, the scrolling on my website stops immediately (instead of fluidly continuing the scroll).
I have a lot of positions with relative/absolute elements on my website.
On Android the page scroll is working well.
Any idea what causes this?
Related
I'm building a reactjs widget which has scrollable lists (vertically) inside it, which takes the entire viewport on mobile (I prevent the default for "touchmove" on the window so as not to scroll the background).
But when I open the widget on iPhone (tested on both Safari and Chrome), I can scroll down the list, but can't scroll back up! if I want to scroll back up, I need to scroll a bit down before I scroll up (one action, without lifting the finger).
I also have reversed lists (same design, only with flex-direction: column-reverse), and I have the exact same behavior regardless of the flex direction.
I also noticed that the "touchmove" event on the list is not firing when I can scroll, but it is firing when I can't.
It works great on desktop, tablets (iPad as well) and android devices - just not on iPhone.
I need the scroll to work both ways on iPhone as well
It was my mistake - it was a combination of using body-scroll-lock and preventDefault of "touchmove" on the body.
All fixed now
I'm using a NavigationPage in a Xamarin Forms app. When the page first loads the navigation bar starts partially under the Android status bar (clock, battery, notifications, etc) and then a second or two after the page loads it shifts down to just below the status bar. I like that the status bar icons don't overlay my navigation bar, but I don't like that the users sees it shift. Is there any way to work around this so that when the page first becomes visible it is already shifted down? Thanks in adavance!
I personally prefer a "splash screen" over the awkward bar that appears on the top by default in a Xamarin.Forms app on Android. In my style of splash screen I just have the app's icon floating in the middle of a white field, with NO nav bar on top. If I understand your problem correctly, this workaround would get rid of the first part so there is no longer a "shift". There are many blog posts out there about how to do this, here is one, and here is my project where I have a splash screen.
There is this site that if you view it on a mobile device (iPhone 6), you're able to drag the page to the left and there's this huge, open, gap. I'm not able to figure out what's causing this. Based on Browserstack's findings (maybe it's a bug?), this tends to cause (on the home page with iPhone 6/6+) device to lose the mobile menu (which should be on the top right).
Is someone able to see what's causing the width to expand beyond the viewport's size? or is this a bug?
I have found that it was caused by an animation script. When an element was set up to animate to come from the right, the margin scripted was causing the right margin to extend.
I'm using a navigation controller (with navigation bar and toolbar) in my app. Triggered by tapping the bars slide in and out with a custom animation. Almost everything works fine with iOS7 so far.
The problem I have is the translucency of the status bar:
From what I understand from this question iOS 7 status bar back to iOS 6 style? (especially from jaredsinclair's answer/blogpost) and from this Status bar issue and navigation bar issue in ios7 is that the status bar is just always translucent. To get the iOS6 status bar look and feel they (simply spoken :)) moved the view 20 points downwards.
Sadly that does not help me with my translucency problem. Because the overall look of the app is quite puristic, it just looks so wrong and confusing to the user's eye when the navigationbar is sliding up and it is still visible while sliding up behind the status bar.
So I tried to simulate the sliding with non-proportional scaling, but it's just not the same. So my next idea would be to somehow make the status bar background opaque. Is this possible? I tried to sandwich some opaque view between status and navigation bar, but I failed.
Any help is appreciated!
I have a web page with a menu fixed to the bottom of the page. When you zoom in on the page with the iPhone (and presumably other mobile devices), the menu also zooms but remains fixed to the bottom of the screen, which causes it to eat up all the screen real estate. Is there any way to keep this menu a fixed size regardless of zoom?
I think this could solve your problem: http://davidwalsh.name/zoom-mobile-browsers