Position: Fixed, use or not use? Substitutes

Asked

Viewed 217 times

1

I recently attended a lecture from Sérgio Lopes , in which he speaks that NAY if you should use position Fixed on mobile. According to him, this position brings huge problems in the mobile browser, as what happens when you zoom in.

However, I am facing a problem now: I need to put a fixed bar at the bottom of the page, like that bottom-bar of the design material.

And now, how to do? Use a heavy js to keep her always there? Divide into two Ivs, and place the top with the fixed content and width and overflow, and the bottom use for the bottom bar?

Or shit on 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 the zoom??

html css pwa

  • He has his personal reasons, but there has never been such a rule.

  • Really, but the arguments are good. So if he said not to use, how would he do that positioning?

  • I used your tip to use separate div,.

2 answers

2

Dude, the 2013 lecture is really out of date. It doesn’t matter to me, but it can shit to lecture hahaha.

The scenario was pretty chaotic in 2013. Nothing worked with Fixed in virtually no browser. Things have improved a lot since then.

But they’re still a little chaotic.

The best reference on fixed in mobile that you find today are the most detailed tests of @ppk:

https://quirksmode.org/css/css2/mobile.html#link1

Note that several modern browsers already support fixed with some certainty. But there are the old ones, and there are 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.

On the zoom, I still advocate that sites do not block the zoom. It is a question of accessibility. Native Apps don’t really allow zooming; that’s a bug. I’m glad that on the Web we can be better than them :-P

  • 1

    Sérgio speaks, nice you comment here, and I’m glad you didn’t take it personally. This kind of debate only enriches the community. Despite the metaphor qq one that contributes to the knowledge of others deserves my recognition! []s

1


You can exchange Fixed for position:sticky although the support of browsers is still not very large.

And remember that this talk is from 2013!! 5 years in the past!

OBS: The IE 7 already accepted position:fixed https://caniuse.com/#feat=css-Fixed

In this answer there are some details of the difference between position:sticky and position:fixedhttps would like to know how I put this fixed header equal to the menu of this site next to logo

About Zoom this is a question of accessibility and limit the use of it is terrible for those who have vision problem, besides there are native mobile apps that zoom in on the screen of qq way... But I would particularly shit on Sergio and do it 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 Guide Line official of WCAG 2.0 and W3C/WAI talking about Zoom on mobile devices https://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

Browser other questions tagged html css pwa

You are not signed in. Login or sign up in order to post.