Steps to reproduce
- Go to https://de.wikipedia.org/w/index.php?title=Elvis_Presley/Diskografie&diff=219599787&oldid=219263831
- Scroll down the page
Expected:
- No empty space appears between the sticky element and the top of the page
Observed:
There is a gap where the sticky header would go:
Developer Notes
We currently have logic in stickyHeader.js that is responsible for determining whether the sticky header should show on a given page:
/**
* Determines if sticky header should be visible for a given namespace.
*
* @param {number} namespaceNumber
* @return {boolean}
*/
function isAllowedNamespace( namespaceNumber ) {
// Corresponds to Main, User, Wikipedia, Template, Help, Category, Portal, Module.
const allowedNamespaceNumbers = [ 0, 2, 4, 10, 12, 14, 100, 828 ];
return allowedNamespaceNumbers.indexOf( namespaceNumber ) > -1;
}
/**
* Determines if sticky header should be visible for a given action.
*
* @param {string} action
* @return {boolean}
*/
function isAllowedAction( action ) {
const disallowedActions = [ 'history', 'edit' ],
hasDiffId = mw.config.get( 'wgDiffOldId' );
return disallowedActions.indexOf( action ) < 0 && !hasDiffId;
}However, we also have render blocking styles that control scroll padding and the offset of other sticky elements:
@media ( min-width: @width-breakpoint-tablet ) {
.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the
// root element. This is needed so that the sticky header does not overlap the
// top of an element when the URI has a hash fragment (e.g. when the user clicks
// a jump link) and when the user tabs through elements in reverse order.
//
// Please note that this class must be independent of the
// .vector-sticky-header-visible class to correctly handle situations where the
// sticky header isn't visible yet but we still need scroll padding applied
// (e.g. when the user navigates to a page with a hash fragment in the URI).
scroll-padding-top: @height-sticky-header;
// T289817 Override other sticky element offsets to ensure that other
// sticky elements (i.e. table headers) appear below the sticky header.
.mw-sticky-header-element,
.charts-stickyhead th {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
}
}Currently, these styles apply to every page, but the JS prevents the sticky header from showing on certain pages which results in the gap. To prevent a shift in the position of sticky elements as the page loads and the JS kicks in, we should consider moving the JS logic to the backend where it controls whether the sticky element's HTML is rendered and also whether the vector-sticky-header-enabled class should be added to the root element (this is necessary for scroll padding to work in all scenarios).
Leverage VectorMaxWidthOptions when moving logic to backend.
