[Affected versions]:

• 67.0a1 (2019-02-11)
• 66.0b7
• 65.0.1
• 60.5.1esr

[Affected platforms]:

• macOS 10.13
• macOS 10.14

[Steps to reproduce]:

1. Launch Firefox
2. Log in to https://www.facebook.com/
3. Play any video
4. Press the "Volume" button

[Expected result]:

• Only the Volume bar is activated.

[Actual result]:

• Both “Volume” and “Continue watching while you use Facebook” buttons are activated.

[Regression range]:

• Reproducible also on RC 63.0; I will come back with additional information.

[Additional Notes]:

• Glitches are triggered when the volume bar is dragged to around 25% (see the attached screencast).
• Issue is reproducible only when the video is running.
• When in enlarge mode couldn't see this problem.
• Note that on one profile the “Click to enlarge” button was unusable for a while; Not sure yet what was the cause for this, but after refreshing the page I could no longer reproduce it.

Not a regression, I could see this issue way back to Fx 54.0a1. On older builds, the Facebook videos are displayed directly in enlarge mode when hit the Play button or builds are not available.

I'm not sure if this is video element related.

Probably not, it's probably a web-compat issue.

This seems relatively minor, but can you take a look Karl?

https://www.facebook.com/Musicians/ has lots of videos -- logging in seems to be required to get the "Continue watching while you use Facebook" button. I have test account details if you don't have one.

The login for watching video is probably Bug 1322001

But let's see this issue.
Using Firefox Nightly 67.0a1 (2019-02-24) (64-bit) on macOS 10.14.3 (18D109)
fresh profile.

Logged in.

Went to https://www.facebook.com/pg/Musicians/videos/?ref=page_internal

Aaaah it took me a while to understand what was meant by buttons are activated. It's not that they are activated, it's that the background-color is changed.

<span
  ><button
    data-tooltip-content="Continue watching while you use Facebook"
    data-hover="tooltip"
    data-tooltip-position="above"
    class="_zbd _42ft"
    data-testid="wns_control"
    type="button"
    id="js_y"
  >
    <i alt="" class="_rwt img sp_iNdbHByoEEp_2x sx_0a945a"></i
    ><span class="accessible_elem">Enter Watch And Scroll</span>
  </button></span
>

.sp_iNdbHByoEEp_2x {
	background-image: url(/rsrc.php/v3/yR/r/FQZCF3SCWEr.png);
	background-size: 21px 114px;
	background-repeat: no-repeat;
	display: inline-block;
	height: 20px;
	width: 20px;
}

The image is a series of icons
https://static.xx.fbcdn.net/rsrc.php/v3/yR/r/FQZCF3SCWEr.png
which is positioned depending on the state.

when I adjust the volume something is also adjusting

    <i alt="" class="_rwt img sp_iNdbHByoEEp_2x sx_0a945a"></i
    >

So I wonder if the rewriting of this part takes time and occasionally displays the wrong state, but probably drag and drop of the volume button should not be updating this other component.

https://static.xx.fbcdn.net/rsrc.php/v3iL3Z4/yJ/l/en_US/xzUCea7OVJn.js

  a.prototype.onButtonClick = function () {
    this.props.showWNSNUX && this.$1(),
    this.props.onEnterWatchAndScroll && this.props.onEnterWatchAndScroll()
  };
  a.prototype.getIconSrc = function () {
    var a = b('VideoPlayerExperiments').rhcWNSEnabled,
    c = b('Locale').isRTL();
    if (a && !c || !a && c) {
      a = b('VideoPlayerExperiments').pipEntryIcon;
      if (a) return a;
      return this.props.isSlidingWNSEligible ? g('463043')  : g('426217')
    }
    return this.props.isSlidingWNSEligible ? g('463039')  : g('463040')
  };
  a.prototype.render = function () {
    var a = b('React').createElement(b('Image.react'), {
      className: '_rwt',
      src: this.getIconSrc()
    }),
    c = b('CurrentUser').isWorkUser() ? i._('Continue watching while you use Workplace')  : i._('Continue watching while you use Facebook');
    c = b('React').createElement(b('AbstractButton.react'), babelHelpers['extends']({
    }, b('TooltipData').propsFor(c, 'above'), {
      className: '_zbd',
      'data-testid': b('VideoWebDriverIDs').WNS_CONTROL,
      disabled: this.props.disabled,
      image: a,
      label: i._('Enter Watch And Scroll'),
      labelIsHidden: !0,
      onClick: this.onButtonClick.bind(this),
      onMouseOut: this.onMouseOut.bind(this),
      ref: 'button',
      tabIndex: this.props.tabIndex,
      type: 'button'
    }));
    a = i._('Video not playing?');
    var d = i._('Click to load the video while you continue using Facebook');
    a = b('React').createElement(b('XUIAmbientNUX.react'), {
      alignment: 'right',
      contextRef: function () {
        return this.refs.button
      }.bind(this),
      customwidth: 250,
      onCloseButtonClick: this.$1,
      shown: this.props.showWNSNUX,
      position: 'above',
      width: 'custom'
    }, b('React').createElement('div', {
      className: '_302j'
    }, a), d);
    return b('React').createElement('span', null, c, a)
  };
  a.propTypes = {
    onEnterWatchAndScroll: c.func,
    tabIndex: c.string
  };

It's all react and dynamic updates.
So probably it would be better to contact Facebook about this part of the code. And see if they stumble upon something else.

Contacted on the partner mailing list.

Thanks Karl.

(In reply to Karl Dubost💡 :karlcow from comment #5)

The login for watching video is probably Bug 1322001

(Note, the video plays without logging in, it's just the "continue watching while surfing" button/feature that requires it)

(In reply to Anca Soncutean [:Anca], Desktop Release QA from comment #1)

Not a regression, I could see this issue way back to Fx 54.0a1.

Note: the same issue happens in Chrome, too. So, it's not a Firefox-specific issue. (And I see it on Linux as well, so it's not Mac-specific).

FYI to anyone on Facebook's end who's investigating this: it looks like Facebook is swapping classes on an element with this sprite as its background-image:
https://www.facebook.com/rsrc.php/v3/yq/r/YLFx01sX0p8.png
...and that class-swap impacts the background-position property in a way that changes the icon that's selected from the sprite.

Also, I couldn't reproduce this 100% of the time, but I did hit it at least once in both Firefox Nightly 67 and in Chrome 74 "dev channel".

At time 0:11-0:12, you can see the relevant CSS change that causes the problem, when the icon goes from blue to white.

The <i> element selected in the left pane here is a wrapper around that blue rectangular icon, and you can see its class attribute change at around 0:12 seconds, and you can see that changes the uppermost matched CSS rule in devtools' central pane to change as well, which adjusts the background-position property from 0 -42px to 0 -63px, which selects a further-down slice of the image sprite.

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Reproduced on the latest Nightly build 71.0a1 (2019-09-10) on Windows 7 x64.

Reproduced on the latest Nightly build 72.0a1 (2019-11-03) on Windows 8.

This issue is still reproducible in latest Nightly 74.0a1 (2020-02-02) using Mac OS 10.15. Changed the flags accordingly.

The media controls layout din change a bit, also when clicking the "Volume" ("Sound") icon, the "Continue watching..." icon is not highlighted.
Checked with:

• Normal mode
• Full-screen mode
• PIP mode
  https://prnt.sc/peyAYUyDJXw-

Tested with:
Browser / Version: Firefox Nightly 103.0a1 (2022-06-09)
Operating System: Windows 10 Pro, Mac OS Monterey v.12.1

Anca does the issue still reproduce on your side?

Anca does the issue still reproduce on your side?

This issue is no longer reproducible on my side either (tested with Fx 102.0b8 on macOS 12.1 and 10.13).

Thanks Anca. I'll close it.