Danmaku in bilibili.com html5 player fickers heavily when it is moving (mostly likely caused by the use of css filter)

Confirmed Issue #15616915 • Assigned to Todd R.

Details

Author
Joel Y.
Created
Jan 25, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
17.17083
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Alexa world 251

 

(Danmaku is the comment on the player screen)
Maybe caused by the use of filter on the nav bar of this site, after I disabled filter:(4px); in .bili-header-m .nav-menu .blur-bg, this problem dissappears.

Example:
https://www.bilibili.com/video/av11385901/ [Have this problem, full site with nav bar]
https://www.bilibili.com/blackboard/html5player.html?cid=18826044&aid=11385901 [html5 player only without nav bar, don’t have this problem,]

UPDATED REPRO STEPS by MS EDGE TEAM

  1. Visit https://www.bilibili.com/blackboard/html5playerhelp.html and click “试用html5播放器” so it changes from blue to red
  1. Visit https://www.bilibili.com/video/av11385901/ 
  1. Play

the video up to 0:30 and then seek back to 0:17 (play will auto resume) 

  1. Repeat step 3 several times
  1. Eventually you will see the scrolling text start from the top right and stutter/flicker (it disappears and restarts a couple times) and you may notice overall performance problems with video and audio

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

  • Hello,

    Thank you for providing this information about the issue. After thorough testing, we are unable to reproduce this problem in Edge 17083. Please try disabling all browser extensions and restarting Edge to see if this fixes the problem.

    Best Wishes,
    The MS Edge Team

  • Sorry, I forgot to mention that you have to enable html5 player at https://www.bilibili.com/blackboard/html5playerhelp.html
    Click “试用html5播放器” to use the html5 player
    There’s a html5 player example at that page, but issue is not that obvious there.

    It’s still producible after I turn off all my extensions, reset Edge, or even try different graphics driver.

    Another example that may relate to the issue is the following Carousal component demo from Fluent Web:
    https://fluentweb.com/components/carousel
    backdrop-filter of the text block is missing, or it will disappear if you click the flipper. Also if you hover over the Shop Windows 10 button on Gaming on Windows 10, backdrop-filter is shown again.
    You can check out my screen capture carousel.mp4

  • Hello,

    Thank you for providing this information about the issue. The fluentweb.com carousel demo cannot be used for this repro since it has the same behavior in other browsers.

    I was able to repro the problem on the bilibili.com site after enabling their HTML5 option and then trying our updated repro steps. We will investigate this and provide an update when we have more progress.

    Best Wishes,

    The MS Edge Team

  • Microsoft Edge Team

    Changed Steps to Reproduce

    Changed Assigned To to “wptcomptri”

    Changed Steps to Reproduce

    Changed Assigned To to “wprpprtri”

    Changed Assigned To from “wprpprtri” to “Todd R.”

    Changed Status to “Confirmed”

    Changed Steps to Reproduce

You need to sign in to your Microsoft account to add a comment.

Sign in