Make WordPress Core

Opened 5 years ago

Last modified 18 hours ago

#40492 new defect (bug)

Twenty Fifteen: Jumping if there is content just before the closing body tag

Reported by: stephenharris Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 4.7.1
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: javascript Cc:


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>

  1. 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();


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.

Attachments (3)

40492.diff (1.4 KB) - added by stephenharris 5 years ago.
40492.mov (1.1 MB) - added by stephenharris 5 years ago.
Screencast of bug
40492.1.diff (805 bytes) - added by sabernhardt 19 hours ago.

Download all attachments as: .zip

Change History (6)

5 years ago

5 years ago

Screencast of bug

#1 @SergeyBiryukov
5 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from TwentyFifteen theme jumps if there is content just before the closing body tag. to Twenty Fifteen: Jumping if there is content just before the closing body tag

#2 @ocean90
4 years ago

  • Focuses javascript added
  • Version changed from trunk to 4.7.1

19 hours ago

#3 @sabernhardt
18 hours ago

  • Keywords needs-testing added; 2nd-opinion removed

Thanks for the report and patch!

I refreshed the patch. Adding an element within wp_footer may be uncommon, but I was able to think of a use case: a back-to-top link.

function sabwp_twenty_fifteen_top_link() {
	echo '<a href="#page" style="background:rgba(255,244,111,0.8);color:#157;position:fixed;bottom:10px;right:10px;padding:10px;">Back to top</a>';
add_action('wp_footer', 'sabwp_twenty_fifteen_top_link', 10);

Changing the variable from body height to #page height seems to work.

Note: See TracTickets for help on using tickets.