Community Forum

Bug Report: Gray bars on the top and bottom of the screen during movie streaming on laptop

Highlighted
Regular Visitor

Bug Report: Gray bars on the top and bottom of the screen during movie streaming on laptop

Description:

I am experiencing gray bars on the top and bottom of the screen when streaming movies in full screen on my laptop. These gray bars are in addition to the black letterbox bars that are part of the movie. So from top to bottom, I see: gray bar, black bar, movie, black bar, gray bar.

 

Expected Result:

I expect the color of the bars/background to be black, not gray.

 

Specifications:

Website: https://www.xfinity.com/stream/

Laptop: Microsoft Surface Book 2

OS: Windows 10 Pro 64 bit

Resolution: 3240x2160

Aspect ratio: 3:2

Browser: Chrome

 

Steps to Reproduce:

Try watching the following movies on a laptop/monitor with a 3:2 aspect ratio in full screen:

  • Us
  • Midnight Special
  • The Good Liar

For Us and Midnight Special, the gray bars appear on the top and bottom of the screen. For The Good Liar, the gray bars appear on the sides of the screen.

 

My theory is that the default color of the background is gray and the movie is drawn on top of this gray background. The most common aspect ratio is 16:9 and it's possible that other aspect ratios, like 3:2, haven't been tested.

 

Please let me know if you need any additional details. Thanks!

 

 

Highlighted
Regular Visitor

Re: Bug Report: Gray bars on the top and bottom of the screen during movie streaming on laptop

Hello again,

 

I've narrowed down the problem to the base.css file. Here is the temporary solution for anyone having the same issue:

 

  1. In Chrome, go to https://www.xfinity.com/stream/ and watch any movie or TV show.
  2. While the movie is playing, open Chrome Developer Tools. You should see the movie playing on top of a dark gray background. The exact color of this background is rgb(25, 25, 25) or #191919. Make sure to move the mouse away from the movie so that the player controls disappear.
  3. In Chrome Developer Tools, go to the Sources tab and click on the file called https://www.xfinity.com/stream/styles/base.css
  4. Go to the end of this file and append the following lines:
    .xa-player-container.tv-player {
        background-color: black;
    }

That literally solves the issue!

 

However, that is only a temporary fix. It only works for one movie at a time or until the page is reloaded. So the only real fix is for the Xfinity web development team to update the base.css file on their end.

 

Thank you very much.