I'm working on an Ionic 4 app, and I've run into a strange issue with a fixed position footer inside their .scroll-content class. I could reproduce this without Ionic, so I'm asking the question in a more general sense:
I have a container element (provided by Ionic in my case) which has:
.scroll-content {
overflow-y: scroll;
position: absolute;
contain: layout size style;
}
Plus some top/bottom/left/right values to position it, they don't impact the problem.
Inside it there is content that is taller than this container, causing the container to scroll, and a footer that I made sticky with position: fixed.
However, the footer doesn't behave as if it's sticky at all unless I remove the "layout" value from the contain property.
let layout = true;
const container = document.querySelector('.scroll-content');
document.getElementById('toggleLayout').addEventListener('click', (e) => {
layout = !layout;
if(layout) container.style.contain = 'size style layout';
else container.style.contain = 'size style';
e.target.innerHTML = `layout: ${layout}`;
});.scroll-content {
contain: layout size style;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow-y: scroll;
}
li {
border-bottom: 1px solid #ddd;
list-style: none;
padding: 10px;
}
footer {
background: #eee;
bottom: 0;
padding: 20px;
position: fixed;
width: 100%;
}<div class="scroll-content">
<button id="toggleLayout">layout: true</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>p</li>
<li>o</li>
<li>q</li>
<li>r</li>
<li>s</li>
</ul>
<footer>Footer</footer>
</div>For now I'd like to assume Ionic added this class with a purpose, so I prefer not to override it. Is the broken position: fixed behavior expected? If so, what can I do to work around it and make my footer fixed again?
