Bug 123326 – Element with position:fixed moves when scrolling and is duplicated on the page each time scrolling is initiated

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Thomas Kahn]

Created attachment 215149 [details]
The screen of the actual machine filmed.

Date when discovered
-----------------------
2013-10-24

Hardware
-----------------------
MacBook Pro Retina 2012
2.6 GHz Intel Core i7
16GB 1600 MHz DDR3
NVIDIA GeForce GT 650M 1024 MB

OS
-----------------------
OS X 10.9 (13A603)

Steps to reproduce
-----------------------
1) Upgraded from Mac OS X 10.8 (Mountain Lion) to 10.9 (Mavericks) on the machine described above.
2) Opened up Safari and surfed to http://www.morgannorman.com.
3) Opened up one of the portfolio galleries (for example: http://www.morgannorman.com/portfolio/black-box-exhibition/)
4) Added one of the images in the gallery to the Shortlist by clicking the "+ ADD TO SHORTLIST" links under the image.
5) Clicked the Shortlist Tab in the bottom right corner of the page to show the Shortlist Bar.
6) Scrolled the page.
7) You can also try other pages where the Shortlist Tab is present.

Expected results
-----------------------
The Shortlist Bar should stay fixed at the bottom of the page according to its CSS:

#ShortlistContainer {
   width: 100%;
   height: 80px;
   background: #e9e9e9;
   position: fixed;
   margin: 0;
   padding: 10px;
   left: 0;
   z-index: 500;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
}

.shortlistContainerOpen {
   bottom: 0;
}

Actual result
-----------------------
The fixed Shortlist Bar follows the page until you stop scrolling. Then it sits where it ended up after the scrolling. If you start scrolling again, a new copy(!) of the Shortlist Bar starts travelling up the page so in the end you can have lots of copies of the same HTML element on the page. See the attached movie.

[Simon Fraser (smfr)]

Is there anything unusual about the screen config on your machine? Does this happen if you make a new user account?

[Thomas Kahn]

(In reply to comment #1)
> Is there anything unusual about the screen config on your machine? 
> Does this happen if you make a new user account?

No, there is nothing special with the screen config. I've tried this on several other Mac's as well with the same result. The only thing they have in common is Safari 7.

[Thomas Kahn]

If you want to attempt to reproduce the error, you might want to try it on this page:

http://www.morgannorman.com/backstage/

It's the page used in the supplied film.

I've looked over the HTML and CSS of the site and I can't see anything out of the ordinary. Yes, the site relies heavily on javascript for its rich interface, but it works just like it should in Chrome, Firefox and Internet Explorer. It also works in older versions of Safari - just not in Safari 7.

The reason I filed a bug report here was the very unusual behavior where an element gets duplicated over the screen when you scroll, like showed in the film. I haven't seen this kind of error caused by a faulty CSS or markup in all my years as a web developer. It looks a lot more like some form of browser rendering error?

[Thomas Kahn]

IMPORTANT!

To reproduce this error, the Shortlist on the website must be empty. If no, it works like it should.

[Simon Fraser (smfr)]

I can't get into the state where the shortlist is empty, but the shortlist bar remains visible.

[Thomas Kahn]

On the demo page that I supplied, I have now implemented a fix to prevent the shortlist bar from becoming duplicated over the screen. This is after all a live site. The fix was to set "display: none" when the shortlist bar should not be visible on the screen. Previously I didn't hide it, I just moved it off-sceen by giving it a negative value for bottom (bottom: -133px).

Here's the CSS for the shortlist bar, if you want to try to build a cleaner demo to see under which circumstances this bug occurs:

#ShortlistContainer {
   width: 100%;
   height: 80px;
   background: #e9e9e9;
   position: fixed;
   margin: 0;
   padding: 10px;
   bottom: -133px;
   left: 0;
   z-index: 500;
   -webkit-transition: bottom .5s ease;
   -moz-transition: bottom .5s ease;
   -o-transition: bottom .5s ease;
   transition: bottom .5s ease;

   display: none;
}

In this code, the fix is present (display: none) so remove that. If I where to make a guess I'd say that the negative bottom value possibly in combination with position: fixed and the transition confuses Safari 7 somehow.