position: fixed is not working in iOS when loading Angular site inside iframe in Ionic 3
put this css in your style.css
body {
margin: 0px;
}
h3 {
color: white;
padding:0px 50px;
}
my-app{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
app-header,app-home,app-footer{
position: absolute;
left: 0;
width: 100%;
}
app-header,app-footer{
text-align: center;
color: white;
height: 50px;
background-color:#47454b;
}
app-header{
top:0;
}
app-footer{
bottom:0;
}
app-home {
top: 50px;
bottom: 50px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
remove all css of header.component.css
and footer.component.css
here is stackblitz link https://stackblitz.com/edit/angular-load-ionic-iframe-knkgq4?file=src%2Fstyles.css
Mobile Safari - iframe fixed content
I faced this challenge couple of months back while working on a webapp, After researching quiet a bit, The "Shadow DOM "approach suggested in the following article helped.
https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2.
var sd = document.body.attachShadow({mode: 'open'});
// Main slot will absorb all undistributed children.
var mainSlot = document.createElement('slot');
var scroller = document.createElement('div');
scroller.style = 'background: lightblue; position: absolute; top:
0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;';
scroller.appendChild(mainSlot);
sd.appendChild(scroller);
// Selectively, it's also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
var fixedLayer = document.createElement('div');
fixedLayer.style = 'height: 0; width: 0; position: fixed;
overflow:visible;';
sd.appendChild(fixedLayer);
var mainFixedSlot = document.createElement('slot');
mainFixedSlot.setAttribute('name', 'fixed');
fixedLayer.appendChild(mainFixedSlot);
function addToFixedLayer(element) {
//var slotId = String(Math.random());
//var fixedSlot = document.createElement('slot');
//fixedSlot.setAttribute('name', slotId);
//fixedLayer.appendChild(fixedSlot);
//element.setAttribute('slot', slotId);
element.setAttribute('slot', 'fixed');
}
/*Call and pass fixed elemetns to addToFixedLayer method so that they stay
fixed while scrolling */
addToFixedLayer(fixedDivId)
Check this demo https://jsfiddle.net/rsva63ep/
position: fixed doesn't work on iPad and iPhone
I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/
We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.
Related Topics
Cancel All Operations + Afnetworking 3.0
How to Get Nsnumberformatter Currency Style from Isocurrencycodes
Raw Depth Map Sdk for iPhone X
Add 'For...In' Support to a Class in Swift 2
Receive Signal from Beacon While App Is in the Background
Data Repeat in UItableview When Scrolling
iOS: Is Possible to Rounder Radius with Different Value in Each Corner
Core Data Nstimeinterval Using an Accessor Directly Is Buggy
Convert Cmsamplebufferref to UIimage
Paste Formatted Text, Not Images or HTML
How to Record and Save at 240 Frames Per Second
Disable iOS Reachability Swipe Gesture in iOS Game
Uitabbar Change Background Color of One UItabbaritem on iOS7
No Such Module Iqkeyboardmanagerswift
Notification in Swift Every Day at a Set Time