Position: fixed elements with top: 0 can appear offset from top of viewport

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[James Please]

Created attachment 308491 [details]
Blue rectangle hover effect on the purple overlay

OS version: iOS 10.3.1
Browser: Mobile Safari, Mobile Chrome

This appears to be a rendering issue. There are certain situations when an element that has these CSS attributes:

```
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
```

can appear a distance from the top of the viewport proportional to the distance that the user has scrolled. I can only show you this in the context of the application that it is occurring, unfortunately. Here is a link to the application:

---

Steps to reproduce:

1. Grab your iPhone, and open Safari
2. Navigate to that URL
3. Click "Terms of Service"
4. Without scrolling, click the burger menu in the top left to open the menu. Observe that it is in the correct location
5. Close the navigation menu.
6. Scroll the page a bit (not too far!)
7. Open the nav menu. Observe that it is shifted some distance proportional to how far you have scrolled

I understand there is a lot going on here, and it is possible that this is an issue with my application. Some arguments that may give you more confidence that this is a webkit bug:

1. This used to work, and works in all other browsers
2. Opening DevTools on your desktop will show the blue rectangle outline of where the nav *should* be (the top of the page), but it renders shifted down. I cannot think of any situation where this would be expected behavior. Even for position: relative, the blue rectangle outline always tracks the actual element.

I did my best to create a reproducible test case, but it did not work. I am not sure why. You can view the attempt here:

GitHub repository: https://github.com/jmeas/webkit-fixed-bug
Hosted link: https://jmeas.github.io/webkit-fixed-bug/

I'm including the link here in case anyone else is able to modify the code to make it work.

Again – I know a test case that is an entire, complex web app is not ideal. But I figured I'd open the issue to get the conversation started, as I'm reasonably certain this is a webkit bug.

I've attached an image of where Safari is reporting that the div with the purple background is. Clearly it is not there! Also, all elements within the nav are visually offset from where dev tools is reporting they are located.

---

There is a real possibility that this is an application-level problem, and not a Safari problem. If that's the case, I'd expect one or all of these statements to be true:

1. An element with the CSS rules described above can, in some situations, be offset from the top of the viewport
2. The distance the element is offset can be proportional to the distance that the user has scrolled
3. The blue rectangle outline when hovering an element in Safari dev tools does not represent where the element appears visually

My experience suggests that none of those things are true, which, again, is why I opened this issue!

[James Please]

Whoops – forgot the link. Here it is:

https://moolah-app-staging-pr-784.herokuapp.com/terms

(is there a way to edit posts?)

[Simon Fraser (smfr)]

iOS 10.3 started to use the "visual viewports" model for position:fixed, which may have affected this, but only if the page has scale != 1.

[Radar WebKit Bug Importer]

<rdar://problem/31888202>

[Simon Fraser (smfr)]

I can reproduce with https://moolah-app-staging-pr-784.herokuapp.com/terms (please keep that link live!)

[Simon Fraser (smfr)]

Possibly related to the fact that <header class="appHeader"> is position:fixed, and <div class="overlayNav"> is also position:fixed inside of it (so nested fixed, which is redundant).

[James Please]

Simon, don't worry, I'll be sure to keep the link active.

The nested position fixed could be the problem. I'll try nesting position: fixed in the reduced test case tonight to see if that causes the problem.

Note that this also affects the nav items themselves, which do not have any nesting of position:fixed (but their container, a UL, does have position:absolute). So if nested position:fix causes it, there could be other things that cause it, too.

[Simon Fraser (smfr)]

Dup of bug 170280

*** This bug has been marked as a duplicate of bug 170280 ***