Audiotool board archive

Global Track Player Obstructed By Scrollbar

Apollo · started 2019-03-01 00:23 · updated 2020-04-16 15:46

[[Attachment:0]]

While playing music and navigating audiotool.com, you'll notice that the viewport scrollbar obstructs the rightmost side of the global track player. Not only does it break the aesthetic of the UI, but it is also related to z-index issues related to the scrollbar.

Comments (2)

2019-03-07 03:21 · 2019-03-07

NOTE: I just noticed that the styling of track player and the body scrollbar are interdependent (likely for cross-device support) but a preferred design implementation would be to give the track player a right-border of the width of the scrollbar. This width can be subtracted from the computed player's width because it is meant to take up 100% of the viewport width.
http://www.giphy.com/gifs/4KFx6YL2gMDdV3E9ux

2020-04-16 15:46 · 2020-04-16

Oh what innocent times a year ago was.
I fixed this issue in dev tools by changing the associated css rule:
/* FROM / div.new-player-wrapper { width: 100% }
/
TO */ div.new-player-wrapper { width: 100vw }
This should work cross-platform and has good support across browser versions