www.samsung.com - Transitions are not displayed properly when scrolling the page

[fastthinker]

URL: https://www.samsung.com/in/watches/galaxy-watch/galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu/

Browser / Version: Firefox 103.0 Operating System: Linux Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Page not loading correctly Steps to Reproduce: Tested in Firefox Desktop and mobile browser, page is not loading properly.

Tried Chromium, and website loads perfectly.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. When scrolling down the page not all elements are visible and transition properly. Firefox Nightly:

Chrome:

Tested with: Browser / Version: Firefox Nightly 105.0a1 (2022-08-11), Firefox Release 103.0.2 Operating System: Ubuntu 20.04.2

Moving to Needsdiagnosis for further investigation.

[qa_32/2022]

[wisniewskit]

This does not reproduce for me on my OSX macbook, but does in Linux. I see this in the web console in Linux:

Uncaught DOMException: DOMTokenList.add: The empty string is not a valid token. [galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu:8742](https://www.samsung.com/in/watches/galaxy-watch/galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu/)
    <anonymous> https://www.samsung.com/in/watches/galaxy-watch/galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu/:8742
    <anonymous> https://www.samsung.com/in/watches/galaxy-watch/galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu/:8742
    complete https://www.samsung.com/in/watches/galaxy-watch/galaxy-watch5-44mm-graphite-bluetooth-sm-r910nzaainu/:8732

And yes, that's happening in a bit of JS in their HTML with a variable named SCROLLER, so it's likely the culprit. Rather predictably, after un-minifying the script a little, this is the line that's failing:

checkOS: (u = (u = navigator.appVersion.match(/(mac|win|linux)/i)) ? u[1].toLowerCase() : "", void document.documentElement.classList.add(u)),

You can't add an empty string to CSS classList; that's what's throwing the exception. So this is site error. They can fix this in one of three ways (if not more, or a combination of them):

1. include X11 in the list of matches, not just mac/win/linux, and then consider X11 to be the same as linux.
2. just don't try adding an empty string by adding a u &&:

 checkOS: (u = (u = navigator.appVersion.match(/(mac|win|linux)/i)) ? u[1].toLowerCase() : "", u && void document.documentElement.classList.add(u)),

3. default to some other case than an empty string (perhaps something like "unknownOS").

Or option 4, they might want to use navigator.platform instead.

We can also site-patch this by re-writing navigator.appVersion so that if it includes X11, we add linux to the string as well.

[webcompat-bot]

Generate outreach template

[ksy36]

intervention https://bugzilla.mozilla.org/show_bug.cgi?id=1799968

[jackyzy823]

@wisniewskit Hello, this problem has been solved for Desktop. However it is not solved for Firefox Mobile , also not only "watch" site have this issue. See new bug report : https://bugzilla.mozilla.org/show_bug.cgi?id=1860417