[fix][Less] disable sidebar animations on page load
There's a longstanding Chrome bug that causes CSS transitions to show in their terminal states. This patch works around the issue by limiting transitions to JavaScript users only via the `client-js` class which is added to the root `html` Node some time after page content loads. The effect is a better overall experience for everyone but transitions unfortunately no longer appear for no-JS devices. I am unable to reproduce this issue in Vector's configuration. This patch should only be merged as a last resort. Bug: T246419 Bug: T234570 Change-Id: Ifcb2bf1fddb85113a4858b7a210ded3954952e6e
This commit is contained in:
parent
14790f2ea8
commit
3003724a3a
|
@ -3,6 +3,38 @@
|
||||||
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' );
|
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' );
|
||||||
var vector = require( '../skins.vector.legacy.js/vector.js' );
|
var vector = require( '../skins.vector.legacy.js/vector.js' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wait for first paint before calling this function. That's its whole purpose.
|
||||||
|
*
|
||||||
|
* Some CSS animations and transitions are "disabled" by default as a workaround to this old Chrome
|
||||||
|
* bug, https://bugs.chromium.org/p/chromium/issues/detail?id=332189, which otherwise causes them to
|
||||||
|
* render in their terminal state on page load. By adding the `vector-animations-ready` class to the
|
||||||
|
* `html` root element **after** first paint, the animation selectors suddenly match causing the
|
||||||
|
* animations to become "enabled" when they will work properly. A similar pattern is used in Minerva
|
||||||
|
* (see T234570#5779890, T246419).
|
||||||
|
*
|
||||||
|
* Example usage in Less:
|
||||||
|
*
|
||||||
|
* ```less
|
||||||
|
* .foo {
|
||||||
|
* color: #f00;
|
||||||
|
* .transform( translateX( -100% ) );
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* // This transition will be disabled initially for JavaScript users. It will never be enabled for
|
||||||
|
* // no-JS users.
|
||||||
|
* .vector-animations-ready .foo {
|
||||||
|
* .transition( transform 100ms ease-out; );
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* @param {Document} document
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
function enableCssAnimations( document ) {
|
||||||
|
document.documentElement.classList.add( 'vector-animations-ready' );
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
|
* Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
|
||||||
* for focus and `aria-expanded`. Also, flip the icon image on click.
|
* for focus and `aria-expanded`. Also, flip the icon image on click.
|
||||||
|
@ -25,6 +57,7 @@ function initSidebar( document ) {
|
||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
function main( window ) {
|
function main( window ) {
|
||||||
|
enableCssAnimations( window.document );
|
||||||
collapsibleTabs.init();
|
collapsibleTabs.init();
|
||||||
$( vector.init );
|
$( vector.init );
|
||||||
initSidebar( window.document );
|
initSidebar( window.document );
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME please add a class, .mw-navigation, and use that instead of this identifier.
|
// FIXME please add a class, .mw-navigation, and use that here and below instead of this identifier.
|
||||||
#mw-navigation {
|
#mw-navigation {
|
||||||
.mw-checkbox-hack-checkbox,
|
.mw-checkbox-hack-checkbox,
|
||||||
.mw-checkbox-hack-button {
|
.mw-checkbox-hack-button {
|
||||||
|
@ -36,7 +36,6 @@
|
||||||
height: @size-sidebar-button;
|
height: @size-sidebar-button;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base, opacity @transition-duration-base; );
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
|
||||||
|
@ -77,10 +76,24 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-sidebar {
|
// Disable transitions on page load. No-JS users will unfortunately miss out. A similar pattern is
|
||||||
// Enable animations on desktop width only.
|
// used in Minerva's DropDownList. See enableCssAnimations() in skin.vector.js/index.js for context
|
||||||
@media ( min-width: @width-breakpoint-desktop ) {
|
// and additional details on how this class is added.
|
||||||
@timing: @transition-duration-base ease-out;
|
.vector-animations-ready {
|
||||||
.transition( transform @timing, opacity @timing, visibility @timing; );
|
// Enable sidebar transitions on desktop width only.
|
||||||
|
.mw-sidebar {
|
||||||
|
@media ( min-width: @width-breakpoint-desktop ) {
|
||||||
|
@timing: @transition-duration-base ease-out;
|
||||||
|
.transition( transform @timing, opacity @timing, visibility @timing; );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enable sidebar button transitions.
|
||||||
|
#mw-navigation .mw-checkbox-hack-button {
|
||||||
|
.transition(
|
||||||
|
background-color @transition-duration-base,
|
||||||
|
border-color @transition-duration-base,
|
||||||
|
box-shadow @transition-duration-base;
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue