Page MenuHomePhabricator

Flickering of mw-lingo-tooltip divs when less is loaded late
Closed, ResolvedPublic


In some situations, Lingo.less is loaded too late so that mw-lingo-tooltips flicker before display: none; takes effect. This could be fixed by

--- Element.php.orig    2020-01-30 09:56:31.371629525 +0000
+++ Element.php 2020-01-30 09:56:59.091629525 +0000
@@ -240,7 +240,7 @@

-               $divDefinitions = "<div class='mw-lingo-tooltip' id='{$this->getId()}'>";
+               $divDefinitions = "<div class='mw-lingo-tooltip' style='display:none;' id='{$this->getId()}'>";

                $definition = reset( $this->mDefinitions );
                while ( $definition !== false ) {

Event Timeline

The HTML for the tooltips are quickly displayed at the end of the page, particularly on the Terminology page where there are usually a lot of tooltips.

The FOUC is caused by the fact that the RL module ext.Lingo, which has a JS and a LESS (where there is the display=none for these tooltips), is loaded by the JS startup module, which is a bit late.

The patch above works, but I find it could be improved by loading the CSS earlier through a <style src=load.php />. It can be achieved by splitting the style in a dedicated RL module registered with ParserOutput::addModuleStyles() instead of ParserOutput::addModules().

Change 737967 had a related patch set uploaded (by Seb35; author: Seb35):

[mediawiki/extensions/Lingo@master] Avoid flickering at the end of the page

Change 737967 merged by jenkins-bot:

[mediawiki/extensions/Lingo@master] Avoid flickering at the end of the page

Seb35 claimed this task.

Fixed in branch master (future branch REL1_38).