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'm using popup over whole screen. When popup is opened I set body and html CSS to overflow: hidden and prevent screen from scrolling. In all browsers working fine and on the android devices also, but the problem is on the iOS devices. I cannot stop scrolling on the ios devices.
<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>
I need clean CSS solution for this. I tried already to add position: relative, position: fixed but it's not working.
Any solutions?
I had the same problem some days ago and I finally came up with this.
Well, there is a very simple solution to solve this problem... All you
have to do is set that element to have a relative position. For
instance, if you were to specify for the body to hide the horizontal
scrollbars you would want to have the following CSS in your
stylesheet:
body {
position:relative;
overflow:hidden;
}
OR
Another method is adding jQuery if above doesn't work
we can prevent swiping by using something like so:
$('body').bind('touchmove', function(e){e.preventDefault()});
And to re-allow swiping again (i.e. when a menu or full screen modal is closed):
$('body').unbind('touchmove');
Hope this helps you :)
Sorry my English. After some days , I found this solution, it worked for me!
position: touch-action: none;
-ms-touch-action: none;
I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).
However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).
I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!
Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).
This is the CSS of the div that contains the iframe:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
and this is the CSS of the iframe itself:
max-width: 100%;
min-width: 100%;
height: 100%;
Here is the HTML part containing the iframe:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!
PROBLEM:
Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.
WORKAROUND:
You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
FINALLY (though not directly related to google forms): Check these stackoverflow links:
how to properly display an iFrame in mobile safari
How to get an IFrame to be responsive in iOS Safari?
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!