Page MenuHomePhabricator

Coordinates stick to top right of Realtime Preview pane
Open, Needs TriagePublicBUG REPORT

Assigned To
None
Authored By
dom_walden
Jun 7 2022, 12:08 PM
Referenced Files
Restricted File
Jul 25 2022, 10:21 PM
F35216330: firefox_m20kDc91Qv.gif
Jun 7 2022, 9:19 PM
F35215355: coordinates.png
Jun 7 2022, 12:08 PM

Description

What is the problem?

Using Realtime Preview on pages with coordinates, the coordinates stick to the top right of the RTP pane and follow you when you scroll down.

It does not appear to interfere with the functionality. But, it is a bit annoying and looks messy.

Ideally, the coordinates should stay at the top right of the page in the preview like they do when viewing the page normally.

(I don't know which extension deals with coordinates.)

Steps to reproduce problem
  1. Login to https://hu.wikipedia.org/
  2. Go to https://hu.wikipedia.org/wiki/Special:Preferences#mw-prefsection-betafeatures
  3. Enable Realtime preview
  4. Go to https://hu.wikipedia.org/w/index.php?title=World_Chess_Hall_of_Fame&action=edit
  5. Open the Preview pane

Expected behavior: The coordinates appear in the preview in the same place as when viewing the page normally.
Observed behavior: The coordinates always appear in the top right of the pane even if you scroll down.

Environment

Browser: Firefox 91
Wiki(s): https://hu.wikipedia.org MediaWiki 1.39.0-wmf.14 (d160b61) 02:40, 31 May 2022.
Editor WikiEditor 0.5.3 (24ddf19) 09:24, 30 May 2022.

Screenshots

coordinates.png (396×1 px, 144 KB)

Event Timeline

I think it's some sort of interaction between the position: absolute;

#coordinates {
  position: absolute;
  top: 0;
  right: 0;
...

on <span id="coordinates">, and the position: relative;

.vector-body {
  position: relative;
  z-index: 0;
}

on <div id="bodyContent" class="vector-body">.

When the content is rendered in the realtime preview div

<div class="ext-WikiEditor-realtimepreview-preview mw-preview-loading-elements">

the #coordinates span loses its positioned ancestor (the realtime preview div) and instead uses the document body.

Quickly hacking in position: relative; on the realtime preview div

<div class="ext-WikiEditor-realtimepreview-preview mw-preview-loading-elements" style="position: relative;">

seems to fix this, but could well cause other problems..

firefox_m20kDc91Qv.gif (607×884 px, 2 MB)

Why is CSS like this?

The best solution is likely the same as for T281974: Fix alignment of coordinates and page indicators (Vector 2022): use an indicator instead of CSS positioning in the coordinates template.

The long-standing Live Preview has a similar issue:

{F35216438}

At any rate I agree with JJMC89. This is an editorial problem will likely manifest itself in various ways as we increase the rollout of Realtime Preview (coordinates aren't the only things out there that position absolutely within the content area). Usually it's something the community will have to fix, if they want to. Still good to log this issue but I wouldn't personally consider it an issue with Realtime Preview.

Since T315049, the behaviour has changed. The coordinates do not stick to the top anymore. It is now the same as shown in T310064#7987239.

They do slightly overlap the infobox when the Preview is scrolled all the way to to top (like shown in the description).