I am working in ReactJS. I have a menu bar of sorts on mobile that has position: fixed and bottom: 0. It sits stuck to the bottom of the page in portrait and landscape in all browsers except Safari.
In portrait, it works just fine. When you switch to landscape it sits in the right spot, until you scroll the page down. When safari drops the search menu, it pushes the menu bar below the screen. To me (given the position of the menu bar hasn't changed) it seems that the search menu dropping is moving the bottom of the document below the screen. From all my searching, I also haven't seen any fixes to this, it seems like this is just the way Safari is. Anyone have any suggestions?
Here is the relevant component: https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js
It may be your use of vh that is causing the problem.
Safari on IOS uses a value of vh that is 1% of screen height (i.e. it is a fixed value whether or not the search bar is showing at the top). This is so there isn't an 'uncomfortable' jump as the user scrolls down and the search bar disappears.
see for example: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
which has a workaround where you use --vh, defined as one hundredth of window.innerHeight, instead of vh.
(This should probably be a comment to the original question as it's not a full, tested answer, but I don't have enough reputation to make a comment, sorry)
Related
I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
Hi guys as the title says.. i keep getting this horriable right margin when i go down to ipad viewport size and when i view it on the ipad hence you get horizontal scroll bars.. major issue and quite annoying... But when i get down to the view of iPhone it goes away.. really strange.. can any one please help..... you can check it out here
I've deleted all elements from the page and i still get the problem.. so annoying
Click Here to View Problem
In your css, your section and footer style rules have a negative margin left and right. I took them out and it seemed to fix it for me. Perhaps look to see if you have some in your header as well?
I'm not sure why you have a negative margin here, but if you absolutely need this margin at higher window sizes, look into adding these rules into your ipad breakpoints.
I am using greybox on my business site so that users can login and access their accounts.
Example of my site
When the window is activated by selecting "login" or "sign up" at the top of the page, the size of the page or window either expands or changes (discovered by showing scroll bars on bottom and right of window.) How can I keep this from happening? I want the page to have the same size as it did before the window was activated.
While an old thread, for those still using greybox, the following update might be helpful:
Setting the GB_overlay position to "fixed" (in gb_styles.css) as Yoel suggested solved the problem for greyboxes that are not full screen (e.g., gb_page_center), but a full screen greybox (e.g., GB_showPage) still had the horizontal scrollbar and expanding browser window on Chrome, Edge, Chrome on iOS, and Safari on iOS.
Setting the GB_overlay width to 100% wasn't needed for the non-full screen greyboxes, and didn't fix the problem for a full screen greybox. Instead, setting the GB_overlay max-width to 100% fully resolved the expanding browser and horizontal scroll bar appearance in Chrome, Edge, Chrome on iOS, and Safari on iOS.
As Kevin also experienced, Firefox never had these problems with greybox, and these updated changes to the GB_overlay css had no effect on Firefox;s always correct rendering of the greybox.
Yoel's solution worked. He suggested changing the style sheet to reflect "fixed" with 100% width. This fixed the issue on all browsers.
Some visitors of my site are complaining they cannot see the Search bar on my website, when they are using firefox, or some other browser.
The search bar should be at the top right menu
Link to site here : http://www.animefushigi.com/
I believe this is a CSS issue, any ideas on how to fix?
Your menubar is too wide, so the searchbar placed on a new line (at least on a 1024x768 screen).
Just give #menubar a height of 80px and you can see it on the next line.
The real solution will be to give the input inside the searchbox a width. Something like 120px.