1. Introduction

Recently, when I was developing a mobile page, I encountered the need to fix the top navigation bar and add a search input box. My first reaction was to use position: fixed; The implementation. But this property has all sorts of weird problems on mobile. The same question was asked back in 2011, but it’s still being asked 9102 years later. Therefore, I decided to step on the hole of position fixed again in the new environment this year to provide a better idea.

2. Related concepts

  1. Browser window

    The browser window is the visible area of the browser used to display the web page. It does not include the part of the toolbar, but includes the horizontal scroll bar and the vertical scroll bar (only the pixels of the scroll bar itself, not the part of the page that has been scrolled). Can be achieved bywindow.innerWidth 和 window.innerHeightTo obtain.
  2. Browser viewport

    viewport Is the browser viewport, excluding the toolbar portion, horizontal scroll bar, and vertical scroll bar. If there is no scroll bar in the web page, the browser viewport is the same size as the browser window.Mobile CSS pixels do not match the physical pixels on the screen, usually with zooming, which browsers made compatible with web pages as high-resolution screens became common. All mobile developers use meta ViewPort to control zoom.
  3. A Stacking Context is the three-dimensional concept of HTML elements that extend along an imaginary Z axis relative to the user facing a window or web page. HTML elements take up space in the cascading context in order of priority based on their own attributes.

The following three methods currently change the base element of position:fixed:

    1. transformElement whose attribute value is not None
    2. perspectiveElements whose value is not None
    3. inwill-changeSpecifies any CSS properties in the

But it works differently in different browsers

You can refer to: www.cnblogs.com/coco1s/p/73…

3. Problems you have encountered

  1. Does not supportfixed

    In ios7 and Android 2.3 era, mobile terminal support for Fixed is not good, there are bugs or even directly does not take effect. At this point, absolute simulation can only be used to fix the header and tail of the page.
  2. On ios devices, onfixedThe element has an input box, and a soft keyboard pops up after focusing.fixedInvalid/strange movement/input box centered

    This is often attributed to browser implementation differences. Apple gives users a “human touch” feature: The auto-centered input box makes Safari behave strangely.
  3. Some people will

4. Test environment

iphone 6s 

Ios 13.1.3

safari

5. Start testing

1. General fixed layout

To view the demo



As you can see, fixed is acting a little weird in Safari on ios 13, but it doesn’t look like fixed has failed.

So let’s add another vertical color bar that’s one screen high

To view the demo



From this point of view, it is clear that fixed is not invalidated, but the relative parent element is not visible.



And if you look at android 10, it’s perfect.

Combined with the browser viewport concept above and other tests I’ve run since, I’ve found that:

Fixed also works in ios13 when the keyboard pops up. Instead of shrinking the viewPort and triggering the resize event, a scroll layer is added to the viewPort parent element. Roll the input as far into the middle of the screen as possible. Now the header is fixed but the viewport is out of the screen. Fixed works properly when android 10 pops up the keyboard, viewPort shrinks correspondingly, and resize event is triggered. At this point fixed is in line with our needs.

6. Solutions

Now that you know the design of ios, you can tailor your solutions. Obviously there is no way to get the scrolling relationship between viewPort and the real screen in our code, so we can customize a set of input components as we go along.

  1. The original input box is only used for display. After the user focuses on the input box, a full-screen floating layer of Fixed positioning pops up
  2. The input box of the floating layer is placed at the top, and the input box is left blank or the recommended content or automatic completion information is displayed to improve user experience
  3. After the user finishes the input, click OK, the floating layer disappears, and the content is synchronized back to the original input box.

Baidu’s home page



Here directly take Baidu mobile version as a reference, if the business is simple, recommend content and automatic fill all can be omitted.


7. Why not use absolute scheme

Absolute positioning schemes have been widely used and are the most compatible. Compatible with browsers that do not support Fixed. But today, there are very few browsers that are incompatible with Fixed, so

But the Absolute scheme is not perfect, it has other problems that cannot be solved.

  1. The browser records the scrolling height of the pagedocument.documentElement.scrollTopAnd keep the page in its original scrolling position while backing up the history. Using the Absolute scheme will makedocument.documentElement.scrollTopIf it is always 0, this feature will not work. (on safari in ios13, history saves the entire page running status directly, and you can even see the state of the page when you step back instead of reloading the page.)
  2. The pop-up keyboard hasn’t changedviewportSo the page is still likely to scroll (drag)fixedAt the top of the page.

To view the demo




I didn’t mean to write it this way. In fact, websites that adopt Absolute have two problems above

pptr.dev/



This is the documentation site for Puppeteer, using a relatively advanced technology stack. It uses absolute scheme and does not avoid the problem of being rolled.

8. To summarize

Mobile development has more pitfalls than PC development, and sometimes the PC experience is not copied for the user experience. The mobile screen is small, so it is more important to minimize the design of pop-ups, use full screen layer as much as possible or directly open a new page. In this way, the most critical information can be more fully displayed in the limited screen space.