I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.
Related
A seemingly simple issue to which I can find no useful answer.
I have a web page with a long piece of text (Terms and Conditions). To make things easier for users I have broken the Ts & Cs into sections, each with a heading2 element and an opeinging paragraph into which I have inserted anchor jump to links. Above this, is a sliding sidenav element which is only visible below certain screen sizes and which is toggled using a javascript function:
<div id="mySidenav" class="sidenav">
home
shop
notes
info
</div>
<!-- CONTENT -->
<div class="content" id="elemToSlide">
<div class="generallayout">
<h1>Terms and Conditions</h1>
<p>
Welcome to Dermot's Wine Shop. Our Terms and Conditions are set out
below, and cover Purchases,
Deliveries, Returns.... etc
The CSS for the sidenav element is here:
/* SLIDING SIDENAV */
/* This element is only visible when the screen size is less than 460px */
/* It slides in from the left, displacing the main page to the right as it slides */
/* Taken and adapted from W3Schools https://www.w3schools.com/howto/howto_js_sidenav.asp*/
.sidenav {
height: 14em;
width: 0;
position: fixed;
z-index: 1;
top: 25vh;
left: 0;
overflow-x: hidden;
transition: 0.9s;
}
Along the page I have anchors to which the links in the opening paragraph should direct:
<h2 id="purchase">Purchases</h2>
<br />...lots of boring text
<h2 id="delivery">Deliveries</h2>
<br />...lots of boring text
However, if I click on any of these links the page scrolls to a position below the anchor text - this is where it ends up if I click Deliveries in the opening para (...href="#delivery">Deliveries):
Whereas it should be positioned at ...h2 id="delivery">Deliveries:
Now, the sticky header takes up 25vh of screen, but I cannot see why that should matter as I assume the page should move to the position of the linked text?
Perhaps my assumption is wrong, in which case how does one offset the page scroll to allow for this?
All the best,
Dermot
Thanks to Chase and Monica J, who both identified the sticky header as being the issue.
Following some of the links I ended up seeing this question on SO offsetting an html anchor to adjust for fixed header and I took the idea suggested there by Jan and JohanChopin and added an anchor class to my CSS:
.anchor {
display: block;
position: relative;
top: -30vh;
visibility: hidden;
}
and then added anchors in the HTML as shown here:
<h2>refunds</h2>
<a class="anchor" id="refund"></a>
<br />
This anchor is hidden on-screen but is where the screen scrolls to when an anchor link:
Refunds
is clicked.
These modifications worked perfectly.
Thanks to all concerned,
dermot
Without being able to see the entire screen, it sounds like your header could be the issue. The anchors are working but with a sticky header, the content will always be behind it. Padding may correct this. The padding is added to the content to account for the height of the sticky header or as Chase mentioned, using scroll padding.
I'm currently working on a website with member search features, and I have a modal window containing a contact form which, on specific user interaction, pops up over the rest of the content. The modal itself has a position: fixed property and is scrollable. However, when I select a text input and the keyboard slides up, the modal's content is scrolled to the bottom, placing the selected input outside the visible area and breaking UX flow pretty badly (since you have to scroll back up to be able to see what you're typing). Is there something I'm missing or some random property messing with scroll detection?
Oddly, this is a problem I've only encountered on mobile and tablet Android browsers (notably Chrome and Firefox), and not on iOS (both Chrome and Safari). I've also made sure to lock multi-platform and multi-browser page scrolling with this JavaScript library.
Consequently, I've tried a few things already, none of which have been successful. I tried to hard-code the height of the modal to the viewport height using JavaScript (it was originally set at 100vh), and while the scrolling stopped, I was left with an unreachable area at the bottom of the form (most likely equivalent to the height of the keyboard) containing half of a field and the submit button, which isn't really a fix in itself. I also tried to use absolute positioning with a top value forced to the current body scroll position, without success.
HTML:
<section class="modal__container row row--h-center wrapper">
<div class="modal__content">
<!-- Form content (title, subtitle, fields) -->
</div>
</section>
The row and row--h-center add a flexbox display to the container with centered horizontal alignment.
CSS:
.modal__container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000000000000;
pointer-events: none;
overflow-y: scroll;
.modal__content {
position: relative;
width: 80vw;
margin: auto 0;
}
}
I need to have an action bar fixed to the bottom of the screen.
The following CSS works well in desktop mode :
<div class="slds-p-around--large actions">
<lightning-button-stateful
label-when-off="Check All"
label-when-on="Uncheck All"
label-when-hover="Uncheck All"
icon-name-when-off="utility:check"
icon-name-when-on="utility:close"
icon-name-when-hover="utility:close"
selected={selected}
onclick={handleMasterSelection}>
</lightning-button-stateful>
<button class="slds-button slds-button--success" onclick={handleApprove}>Approve</button>
<button class="slds-button slds-button--destructive" onclick={showConfirmationModal}>Deny</button>
</div>
.actions{
position: fixed;
bottom: 0;
width: 100%;
background-color: #F3F2F2;
left: 0;
display: block;
height: 8vh;
z-index: 10000;
}
But in mobile mode it doesn't work, the div isn't fixed. I have to scroll to the bottom of the page to see it.
Any clue about that?
Just change the background-color: #000; and remove left: 0; it should work.
The issue was caused by Salesforce's Mobile App Web container, whose custom scroll prevents position: fixed to work correctly.
After a thorough investigation, I found out that the issue is caused by Salesforce’s mobile app web container, which does not use native window scrolling but instead, translates the content using CSS like translate3d on the swipe down event.
I don’t know why they did that since it breaks the position : fixed CSS among other things.
The workaround I found was the following :
Set something like
max-height : 90vh ; // Can be changed to suit the size you want your « fixed » element to have left
overflow-y : scroll ;
on the content of your page the have your content scrolling without scrolling the page itself. You can then put the content which you want fixed at the top or Bottom of the content, which will imitate the behaviour of a position fixed.
Fixed menu is not working in mobile or responsive
I have a floating menu on the website site, it is working perfectly on desktop sized window, but when i resize the window to mobile size, the menu isn't floating anymore, and only became part of the page. I am almost certain that it has something to do with my other elements that are fixed or relative in position, but couldn't find the culprit.
It is the blue menu on the right side.
The floating menu is made with a plugin called "sticky side buttons", I have reached out for help but no response yet, so I thought I would try asking here.
URL: http://umassfd.org
Thanks!
Can you try this?
#newBridge .nb-icon-wrap {
position: fixed;
box-sizing: border-box;
min-height: 77px;
min-width: 146px;
}
I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.
.js-drawer-open {
overflow: hidden;
}
This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...
.js-drawer-open {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.
I think this is due to position: fixed being applied and I wanted to know if there is any way around this?
Any help would be much appreciated.
Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery