Twentyfifteen: Sidebar has unexpected scrollbar

[schlessera]

Bug Description

The sidebar in the twentyfifteen Core theme has an unexpected scrollbar in the sidebar.

Expected Behaviour

The sidebar should just be integrated into the page and not scroll separately.

Steps to reproduce

1. Install and activate the twentyfifteen theme
2. Make sure you have multiple widgets in the main sidebar to fill more than one scree.
3. Go to the AMP version of a page.
4. Verify: The sidebar has its own scrollbar and scrolls independently from the page.

Screenshots

Additional context

• WordPress version: 5.4.1
• Plugin version: 1.6.0-alpha at commit 2bfb9bb
• AMP plugin template mode: Transitional
• PHP version: 7.2.30
• OS: Mac OS X
• Browser: Google Chrome

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

This is expected, actually. The only way I could figure out how to emulate the theme's sidebar behavior in AMP was to use position:sticky with overflow scrolling.

[schlessera]

If you use position: sticky; top: 32px without any max-height, it's already closer to the original theme and doesn't add a scrollbar. The only difference is that it starts to scroll later than the original theme, but that's already an improvement over now.

With position: sticky; bottom: x? we could probably replicate the original behavior completely, but that would require a markup change, and so could break existing styling.

[schlessera]

The original theme weirdly enough only uses the sticky on the largest breakpoint, but not on the intermediate one - which has the same overall layout.

[westonruter]

OK, it's been a couple years since I worked on this (see #1074).

The code in question is:

amp-wp/includes/sanitizers/class-amp-core-theme-sanitizer.php

Lines 1203 to 1212 in b48aba3

	<?php elseif ( 'twentyfifteen' === get_template() ) : ?>
	@media screen and (min-width: 59.6875em) {
	/* Attempt to emulate https://github.com/WordPress/wordpress-develop/blob/5e9a39baa7d4368f7d3c36dcbcd53db6317677c9/src/wp-content/themes/twentyfifteen/js/functions.js#L108-L149 */
	#sidebar {
	position: sticky;
	top: -9vh;
	max-height: 109vh;
	overflow-y: auto;
	}
	}

If your approach works better then I'm all for it!