WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 5 months 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 2nd-opinion
Focuses: javascript Cc:

Description

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

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.

Attachments (2)

40492.diff (1.4 KB) - added by stephenharris 6 months ago.
40492.mov (1.1 MB) - added by stephenharris 6 months ago.
Screencast of bug

Download all attachments as: .zip

Change History (4)

@stephenharris
6 months ago

@stephenharris
6 months ago

Screencast of bug

#1 @SergeyBiryukov
6 months 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
5 months ago

  • Focuses javascript added
  • Version changed from trunk to 4.7.1
Note: See TracTickets for help on using tickets.