[wp-trac] [WordPress Trac] #40492: TwentyFifteen theme jumps if there is content just before the closing body tag.

[WordPress Trac]

#40492: TwentyFifteen theme jumps if there is content just before the closing body
tag.
---------------------------+-----------------------------------
 Reporter:  stephenharris  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Themes         |    Version:  trunk
 Severity:  minor          |   Keywords:  has-patch 2nd-opinion
  Focuses:                 |
---------------------------+-----------------------------------
 '''Steps to reproduce:'''

 1. Activate the TwentyFifteen theme
 2. Add enough widgets so that it is longer than both the screen and the
 main content.
 3. Ensure the viewport is wide enough so to you are not seeing a 'mobile
 view'.
 4. Insert content (i.e. using `wp_footer`) hook. In my case I have
 inserted an image which sits between the `</body>` and `#page </div>`.
 Here's what the HTML looks like:

 {{{
 </div><!-- .site -->

 <span class="report-a-concern">
 <a ...><img ..></a>
 </span>

 </body>
 }}}

 5. View the page and scroll down. As soon as the bottom of the screen
 reaches the bottom of the sidebar, the page jumps back up.

 '''Here what I found:'''

 When the main content is ''longer'' than the sidebar TwenyFifteen's
 behaviour is that when you hit the bottom of the sidebar, it sticks to the
 bottom of the screen as you scroll further down. Scrolling back up again,
 the sidebar sticks at the top once the screen reaches the top of the
 sidebar.

 However, in calculating whether the sidebar is longer than the main
 content or not is it using the height of `body`. In this instance, the
 main content is shorter than the sidebar, but the `body` is longer because
 of the inserted image.

 Consequently, the theme thinks, when it reaches the bottom of the sidebar
 that it needs to fix the sidebar at the bottom of the screen. This in turn
 adjusts the height of the page (the `body`), causing the screen to jump
 up. The theme responds to this change in screen position by unsticking the
 sidebar (because you are no longer at the bottom of the page).

 '''The fix:'''

 Essentially replace `bodyHeight    = $body.height();` with `bodyHeight
 = $('#page`).height();

 '''Context:'''

 Inserting content using `wp_footer` is rather unorthodox, so I appreciate
 if this closed as 'wontfix' because that is not something that should be
 supported. The context for this is a large multisite for students of ages
 5-16 to create their own blogs. A requirement is that a link appears at
 the bottom of all the blogs (which us a variety of themes) allowing users
 to report any inappropriate content (indecent images, abusive or
 threatening language, etc). Inserting the link using the `wp_footer` is
 the most reliable, theme-agnostic way of doing that.

 Patch to follow.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40492>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform