I'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
I have this simple html that uses a tiny bit of bootstrap:
<div id="A" class="col-4">
<div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
*some content*
</div>
And its corresponding CSS:
.img { width: 100%; height: 100%; }
Everything is in this pen : https://codepen.io/anon/pen/EbBGQw
The image correctly displays on the entire height of the parent div on either Chrome or Firefox, either Windows or Android :
However, on iOS devices (tested on iPhone and iPad recent browsers), the images don't show up :
I've done some digging and cleared some potential culprits :
I'm not using position: fixed;
My images aren't too large
I'm not using the background shorthand
What I have found, however, is that entering any text inside the "img" div will make the background-image appear behind the text. The image still won't cover the entire div, but it does appear.
Why is Safari not showing the image properly ? What is the best way to deal with the issue and have the image properly cover its entire div ?
When you set the height to 100% :
The height will only be as large as what is inside the element.
If there is nothing inside, the height will be 0.
If there is a paragraph (as shown here), the height will be as large as the paragraph. I suggest using either pixels, rems or ems instead.
The way you wrote your image style background did not work in chrome either. I put it in the img class instead and it worked.
If you don't want to add the background image to your img class, you could do this instead:
<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>
.img {
width: 100%;
height: 100%;
background-image: url("image.jpg");
}
<div class="img"><p>Testing</p></div>
After more digging, and the suggestion from #Michelle Cantin, I found out that the height: 100% from my CSS is ignored by Safari.
In this great answer, a fix is proposed using position: absolute;. I applied relative position to the parent element (#A) and absolute positioning to the child (.img), which fixed the issue.
The image can be seen covering the entire left column for as heigh as the right column goes in this pen : https://codepen.io/anon/pen/bYPzew
I have a nav-bar and trying to place the users name and profile picture in the nav-bar with a dropdown menu. Its working fine except I cant get the padding/margins right to prevent it from making the top-bar larger when the image is there. This is the html for the part of the top-bar with the user avatar and name (its a dropdown menu)
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a class="avatar">
<%= image_tag(current_user.avatar.present? ? current_user.avatar : "default-user.jpg", width: "40", height: "40") %>
<span><%= current_user.displayname.present? ? current_user.displayname : current_user.firstname %></span>
</a>
<ul class="menu vertical">
......
</ul>
</li>
</ul>
</div>
Ive tried adding various classes and editing the css but I cant seem to get rid of the padding that creates the extra space...I can make the image smaller but the size gets to small to prevent the padding making the bar larger. Heres a screenshot of what i mean with the bar being too tall, you can see that there is a gap under the rest of the bar besides the image:
EDIT: Been playing around and still cant figure this out, Ive updated the screenshot with the inspect so you can see the specific html. Also ive tried to add a class "avatar" and added this to my scss file:
a.avatar{
padding-top: 500px;
padding-bottom: 0px;
}
but it doesnt change anything (tested with another element and it did change things)
EDIT 2: Figured it out...took awhile but I had to fully define the path in the css. So it turned out to be this:
.dropdown.menu li.is-dropdown-submenu-parent a.avatar{
padding-top: 0rem;
padding-bottom: 0rem;
}
And that worked out perfectly....thanks for all the comments still
I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
I'm noticing an odd effect in jQuery Mobile when viewing a page's background image on a low resolution screen (or resizing your browser's window to simulate a small screen). When navigating to a page with a background image, the image appears near the bottom of the screen for a split second, before "jumping" up to the center of the screen (it should appear in the center of the screen right from the start).
I set up a fiddle to demonstrate what I'm referring to. To get the full effect, first resize the fiddle "Result" window (bottom right of the screen) to where it's approximately the size of the div with the red background. Then click on the "Image page" button.
http://jsfiddle.net/FgVz8/3/
What causes the background image to have this "jerky" behavior? And more importantly, any ideas how I can fix it?
It wouldn't be a big deal if it was just a single image, but I'm building an image gallery with back/forward buttons, and every single image (each on a separate jQM "page") that is navigated to exhibits this strange effect, so it makes for a rather "unsmooth" user experience... especially when viewing multiple images one after another.
Any help is greatly appreciated!
Edit: it looks like Stack Overflow won't let me link out to JSFiddle unless I also post my code here, so here's my code...
HTML body...
<div id="home_page" data-role="page">
<div id="content" data-role="content">
Image page
</div>
</div>
<div id="image_page" data-role="page">
<p>Test 123...</p>
</div>
CSS...
#content {
background: red;
width: 200px;
height: 250px;
}
#image_page {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/2000px-Logo_Google_2013_Official.svg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}