Page MenuHomePhabricator

<score> markup playback bar overlaps the staff
Open, Needs TriagePublic

Description

When using <score> markup playback bar overlaps the staff:

Examples: https://test.wikipedia.org/wiki/T216305_sample

https://en.wikipedia.org/w/index.php?title=User:Xaosflux/sandbox69&oldid=883548604&useskin=vector

Works in mobile skins.

Reported by M​5@enwiki

Event Timeline

Xaosflux created this task.Feb 16 2019, 2:11 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 16 2019, 2:11 AM
Xaosflux updated the task description. (Show Details)Feb 16 2019, 2:13 AM
mb added a subscriber: mb.Feb 16 2019, 10:53 AM
Ebe123 claimed this task.Mar 6 2019, 12:21 AM

Change 495882 had a related patch set uploaded (by Ebe123; owner: Ebe123):
[mediawiki/extensions/Score@master] Add bottom margin to score images

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

Bonvol added a subscriber: Bonvol.Mar 18 2019, 9:35 PM
Ankry awarded a token.Mar 29 2019, 8:00 AM

The overlap appears be due to an overflow caused by the TimedMediaHandler player. The player is exceeding its own height and aligns to the bottom, causing the overflow to not increase its height, but instead overlap the element above it (the Score image).

TimedMediaHandler's next player based on videojs, can be seen on test2.wikipedia.org, where the overlap does not occur.

https://test2.wikipedia.org/wiki/T216305_sample

Having said that, a bit of additional margin wouldn't hurt :)

Change 495882 merged by jenkins-bot:
[mediawiki/extensions/Score@master] Add bottom margin to score images

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

mb added a comment.Apr 14 2019, 1:20 AM

Krinkle's image above is not what Firefox or Chrome show for me. I see the player not below but to the right of the score, slightly above. https://screenshots.firefox.com/DFTNorXXoFXr8kN1/test2.wikipedia.org

@mb Yes, that's for me as well. It depends on window width.

Ebe123 updated the task description. (Show Details)Apr 14 2019, 1:25 AM

Just saying, the change isn't active on either testwiki right now. Wait a bit :)

Ankry added a subscriber: Ankry.Aug 21 2019, 10:27 AM

@Ebe123 @Krinkle I do not think the https://gerrit.wikimedia.org/r/495882 is correct:

  1. it works only with multipage scores (well, on an inlined score image the extra spacing is not expected, but if the midi player is added the spacing is still needed)
  2. it adds extra space not only before the player, but also between pages (well, in most cases it does not hurt, but see below)
  3. the space is in em (current context font-size dependant). And this can sometimes give unexpcted results.

I would suggest the extra space to be in px, added only after the last page and only if the player is present.
Maybe just put the player into an extra div with non-zero margin-top?