www.deviantart.com - Old design displayed for scroll bar for date-picker menu

[softvision-oana-arbuzov]

URL: https://www.deviantart.com/join/

Browser / Version: Firefox Nightly 71.0a1 (2019-10-09) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: Old design displayed for scroll bar for date-picker menu

Steps to Reproduce:

1. Navigate to https://www.deviantart.com/join/
2. Click any of the date drop-down menus of the “Date of Birth” (e.g “Year”).
3. Observe scroll bar design.

Expected Behavior: The scroll bar has a new design with gradient color, similar to the date hover or “Join” button.

Actual Behavior: The scroll bar has an old design.

Note

1. Not reproducible on Chrome 77.0.3865.90
2. Screenshot attached.

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[wisniewskit]

They are using non-standard CSS scrollbar styling:

._3k_hb .YPU8r::-webkit-scrollbar {
    width: 8px;
    background-color: #f5f5f5;
}
.YPU8r::-webkit-scrollbar {
    width: 16px;
    background-color: none;
}
.YPU8r::-webkit-scrollbar-button {
    height: 6px;
}
._3k_hb .YPU8r::-webkit-scrollbar-thumb {
    width: 8px;
    background: linear-gradient(0deg,var(--G16),var(--A1));
    border-radius: 5px;
    border: none;
    background-clip: unset;
}
.YPU8r::-webkit-scrollbar-thumb {
    background-color: rgba(110,181,241,.45);
    border-radius: 10px;
    background-clip: padding-box;
    border: 4px solid transparent;
    height: 58px;
}

Firefox does not support this degree of scrollbar styling (that's bz1432935), but the current standard properties they can alter are scrollbar-width and scrollbar-color, which DeviantArt could likely use to improve things a bit.

@ksy36, @denschub, should we reach out to them with a suggestion, or is a site patch considered more appropriate at this point in time?

[ksy36]

We can do both I think, though wonder if adding a patch worth it, since functionality is not affected. I'll add the action-needssitepatch label so we don't forget about this for the next pool of interventions :)

[softvision-oana-arbuzov]

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 72.0a1 (2019-11-25) Operating System: Windows 10 Pro

[reinhart1010]

DeviantArt has a ~customer service support~ Help Desk system at https://contact.deviantartsupport.com/en - account required to submit a ticket.

Reference:

• https://www.deviantartsupport.com/en/article/how-do-i-report-a-bug-on-the-website
• https://www.deviantartsupport.com/en/article/how-do-i-submit-a-ticket-to-customer-service

[karlcow]

https://bugzilla.mozilla.org/show_bug.cgi?id=1432935 has been closed as wontfix.

And I'm not sure a sitepatch is useful here, given that, as @ksy36 mentioned, the site is more than functional without it.

[karlcow]

So to summarize the comment here gives suggestion on how to improve the rendering on Firefox

• https://github.com/webcompat/web-bugs/issues/41912#issuecomment-541086169
• https://bugzilla.mozilla.org/show_bug.cgi?id=1170789 This bug is about the maybe support of some -webkit-scrollbar properties in Firefox Gecko for webcompat reasons 😕
• Nothing really broken in the current situation, this is perfectly functional. I'm setting the severity to minor.

@mccann is the CTO/co-founder but I doubt he is reading here.

[karlcow]

There are currently two open issues for deviantart https://github.com/webcompat/web-bugs/issues?q=is%3Aissue+is%3Aopen+deviantart+in%3Atitle

[mccann]

@karlcow, No longer with deviantART, but I will let appropriate people know..

[karlcow]

Thanks a lot!