Position: fixed, use or not use? Substitute
I recently attended a talk by Sérgio Lopes, in which he talks that Not should use position fixed on mobile. According to him, this position brings huge problems in the mobile browser, such as what happens when zoom.
However, I am facing a problem right now: I need to put a fixed bar at the bottom of the page, than not that bottom-bar of the material design.
And now, how to do? Use a heavy js to keep her always there? Split into two divs, and put the top one with fixed content and width and overflow, and the bottom one use for the bottom bar?
Or shit for Sergio?
Another thing that is not part of this question: in native apps there is no zoom, so if it is a pwa, which is like-app, why not disable zoom??
2 answers
Vc can exchange fixed for position:sticky although the support of browsers is not yet very large.
- documentation: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position
- Browser Support: https://caniuse.com/#feat=css-sticky ( does not work in IE)
And remember that this lecture is from 2013!! 5 years in the past!
Note: IE 7 already accepted position:fixed https://caniuse.com/#feat=css-fixed
In this answer has some details of the difference between position:sticky and position:fixedhttps I would like to know how I put this fixed header equal the menu of this site next to logo
About Zoom this is a matter of accessibility and limiting the use of it is terrible for those who have vision problems, in addition there are native mobile apps that give zoom on the screen of QQ form... But I would particularly shit for Sergio and do with Fixed...
A variety of methods allow the user to control content size on mobile devices with small screens. At the browser level these methods are generally available to assist a wide audience of users. At the platform level these methods are available as accessibility features to serve people with visual impairments or cognitive disabilities.
Here's the official Guide line of WCAG 2.0 and W3C / WAI talking about zooming in mobile devices https://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification
Dude, really the 2013 talk is already pretty outdated. Don't shit for me no, but you can shit for the lecture hahaha.
The scenario was quite chaotic in 2013. Nothing worked with fixed in virtually any browser. things have improved a lot since then.
But they remain somewhat chaotic.
The best reference on fixed in mobile that you find today are the very detailed tests of the @ ppk :
Https://quirksmode.org/css/css2/mobile.html#link1
Note that many modern browsers already support fixed with some security. But it has the old ones, and it has the other types of browsers. I recommend looking there to understand the current limitations, and for you to decide which browsers you want to support.
About zooming, I still advocate that websites do not block zooming. It's a matter of accessibility. Really native Apps don't allow zoom; this is a bug. Good thing on the Web we managed to be better than them: - P