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

Assigned To

Authored By

	planetenxin
	Jan 30 2020, 10:07 AM

Description

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 @@
                        return;
                }

-               $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 ) {

Details

	Subject	Repo	Branch	Lines +/-
	Avoid flickering at the end of the page	mediawiki/extensions/Lingo	master	+18 -6

Customize query in gerrit

Event Timeline

planetenxin created this task.Jan 30 2020, 10:07 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 30 2020, 10:07 AM

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

https://gerrit.wikimedia.org/r/737967

gerritbot added a project: Patch-For-Review.Nov 10 2021, 4:30 PM

Change 737967 merged by jenkins-bot:

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

https://gerrit.wikimedia.org/r/737967

Maintenance_bot removed a project: Patch-For-Review.Jan 9 2022, 8:10 AM

Fixed in branch master (future branch REL1_38).

Flickering of mw-lingo-tooltip divs when less is loaded lateClosed, ResolvedPublicActions

Description

Details

Event Timeline

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