Content jumps after JavaScript is loaded
Open, NormalPublic

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

Dvorapa created this task.Jun 19 2016, 4:43 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 19 2016, 4:43 PM
Dvorapa updated the task description. (Show Details)Jun 19 2016, 4:50 PM
Dvorapa updated the task description. (Show Details)Jun 19 2016, 4:53 PM
Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)
Dvorapa updated the task description. (Show Details)
fbstj updated the task description. (Show Details)Jun 20 2016, 7:23 AM

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)
ori added a subscriber: ori.Jun 20 2016, 10:02 AM

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:


which causes this jump/hop/shift too

Dvorapa added a comment.EditedJun 20 2016, 10:21 AM

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)

Restricted Application added a project: VisualEditor. · View Herald TranscriptJun 20 2016, 10:23 AM
Restricted Application added a project: VisualEditor. · View Herald TranscriptJun 20 2016, 10:29 AM

Why is this tagged with VE?

@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?

Ltrlg added a comment.Jun 20 2016, 8:41 PM

@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.

Dvorapa added a comment.EditedJun 27 2016, 9:18 PM

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 Normal priority.Jul 12 2016, 7:22 AM
Nemo_bis added a subscriber: Nemo_bis.
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)