Page MenuHomePhabricator

Content jumps after JavaScript is loaded
Closed, DuplicatePublic

Description

Steps to reproduce:

  1. Find and visit a wiki with banner on the top of every page (currently e.g. cswiki - 2 banners)
  2. Find and visit any page (best example: any template) on that wiki
  3. Optional: Click on edit button

Incorrect behavior:
Any banner(s), templatedata butons, editor header and other contents of the page heading make the whole edit field (textarea) jumps down after JS is loaded (and therefore these contents of heading are displayed). This effect is even worse on slower internet connections. User then click e.g. in the edit field to write, but it makes nothing or something unwanted, because during or right before the click the whole heading loads.

Expected behavior:
For those contents of page heading there should be reserved a place (space) after start of loading at the beginning of the page in order not to make this jump. The contents then could be displayed after the it is loaded.

Timeline:
0 s: Link to a page was clicked
1 s: The interface is loaded and the edit field (or page text) is loaded
4 s: The heading (banners, templatedata buttons, edit field heading) is loaded and the edit field (or page text) jumps down

PS: This is one of the basic web creator's rule

Event Timeline

Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)

Please provide a specific example page to test with. Also, which browser(s) was this tested with?

Aklapper renamed this task from Jump of the content to Content jumps after JavaScript is loaded on slow connections.Jun 20 2016, 9:11 AM

Any page, better to be logged in (banners just for logged in users), any browser.

Try this combination:

page: https://cs.wikipedia.org/w/index.php?title=%C5%A0ablona:Infobox_Politik&action=edit
browser: Google Chrome 50
speed: 300kbps (or under 1Mbps at least)

This is probably CentralNotice's greatest hit T52865, also known as T109634, and similar problems in the TemplateData and DismissableSiteNotice extensions. The page @Dvorapa linked to has the particular misfortune of being affected by all three.

@ori yeah and don't forget to editor's header:

Source_editor_toolbar-cs.png (67×776 px, 19 KB)

which causes this jump/hop/shift too

Another things to consider:
Do TemplateData buttons really need to be above the text editor field?
Do banners really need to be on Source Editor edit pages? (in VE edit interface they aren't)

@Esanders Because Herald adds it automatically (maybe it adds this tag automatically where TemplateData tag is added). I tried to remove it, but without success

@Dvorapa I have never understood why the TemplateData edit tool is not in the standard toolbox(es). Maybe @Mooeypoo remembers why he implemented it this way?

@ori Indeed. In my defense, “Moriel” is closer to men names in French (in the written form).

Sorry @Mooeypoo, I’ll try to remember for next time.

Change 296275 had a related patch set uploaded (by Ori.livneh):
Don't show the banner on action=edit

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

Thanks @ori and everyone! Just to copying here the rationale from the commit message of @ori's patch:

Don't show the banner on action=edit

  • It's a nice gesture to contributors.
  • Edit pages represent a small fraction of site traffic.
  • On submitting an edit, the user is taken to the article view.
  • We have editnotice for targetting edit pages specifically

So, editors who miss a banner on the edit page would see it after clicking "Save".

@Jseddon, @DStrine thoughts? Seems totally fine to me, and in the same spirit as our current blocking of banners on Special pages...

Administratia: following the title of this bug, it's a duplicate of T52865, so we might mark it as such? The description is nice, focusing on the issue when editing, and that's the only situation the patch solves targets... so, another option would be to narrow the bug to only that content jumps on edit pages.

But please create another task from this for templatedata buttons and editor header before you'll change this one to banner-on-edit-pages only

Change 296275 merged by jenkins-bot:
Don't show the banner on action=edit

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

Nemo_bis triaged this task as Medium priority.Jul 12 2016, 7:22 AM
Nemo_bis subscribed.
Dvorapa renamed this task from Content jumps after JavaScript is loaded on slow connections to Content jumps after JavaScript is loaded.Apr 30 2017, 9:07 AM
Dvorapa updated the task description. (Show Details)