[Webkit-unassigned] [Bug 171413] New: Position: fixed elements with top: 0 can appear offset from top of viewport

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Apr 27 19:49:11 PDT 2017


            Bug ID: 171413
           Summary: Position: fixed elements with top: 0 can appear offset
                    from top of viewport
           Product: WebKit
           Version: Other
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: HTML DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jellyes2 at gmail.com
                CC: cdumez at apple.com

Created attachment 308491

  --> https://bugs.webkit.org/attachment.cgi?id=308491&action=review

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!

You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170428/c8a0add6/attachment.html>

More information about the webkit-unassigned mailing list