Playback of clear media with 50 FPS is jittering seems like frame dropped

[giladna]

What version of Hls.js are you using?

1.2.1

What browser (including version) are you using?

Version 104.0.5112.101

What OS (including version) are you using?

mac 12.5.1

Test stream

will be shared via mail

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

 or 

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": false,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. load player with that media
2. wait till player goes to high bitrates
3. observe that player is jittering and the 50FPS playback is not fluent

Expected behaviour

player will play 50FPS without frame loss and player jittering

What actually happened?

the user experience is not good

on Safari for that stream we do not see it is taking 50FPS but keep using 25FPS
when playing the 50FPS track directly no issue observed

turning on chrome hardware accelerator did not help.
issue is observer on other browsers

Console output

will be shared via email

Chrome media internals output

Selected VDAVideoDecoder for video decoding, config: codec: h264, profile: h264 main, level: not available, alpha_mode: is_opaque, coded size: [320,180], visible rect: [0,0,320,180], natural size: [320,180], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
Effective playback rate changed from 0 to 1
video decoder config changed midstream, new config: codec: h264, profile: h264 main, level: not available, alpha_mode: is_opaque, coded size: [640,360], visible rect: [0,0,640,360], natural size: [640,360], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
Selected VDAVideoDecoder for video decoding, config: codec: h264, profile: h264 main, level: not available, alpha_mode: is_opaque, coded size: [640,360], visible rect: [0,0,640,360], natural size: [640,360], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
video decoder config changed midstream, new config: codec: h264, profile: h264 high, level: not available, alpha_mode: is_opaque, coded size: [960,540], visible rect: [0,0,960,540], natural size: [960,540], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
Selected VDAVideoDecoder for video decoding, config: codec: h264, profile: h264 high, level: not available, alpha_mode: is_opaque, coded size: [960,540], visible rect: [0,0,960,540], natural size: [960,540], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
video decoder config changed midstream, new config: codec: h264, profile: h264 high, level: not available, alpha_mode: is_opaque, coded size: [1920,1080], visible rect: [0,0,1920,1080], natural size: [1920,1080], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
Selected VDAVideoDecoder for video decoding, config: codec: h264, profile: h264 high, level: not available, alpha_mode: is_opaque, coded size: [1920,1080], visible rect: [0,0,1920,1080], natural size: [1920,1080], has extra data: false, encryption scheme: Unencrypted, rotation: 0°, flipped: 0, color space: {primaries:BT709, transfer:BT709, matrix:BT709, range:LIMITED}
Dropping frame with timestamp 3637.96 s, which is earlier than the last rendered frame (3637.96 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.3 s, which is earlier than the last rendered frame (3638.3 s).
Dropping frame with timestamp 3638.62 s, which is earlier than the last rendered frame (3638.62 s).
Dropping frame with timestamp 3638.62 s, which is earlier than the last rendered frame (3638.62 s).
(Log limit reached. Further similar entries may be suppressed): Dropping frame with timestamp 3638.62 s, which is earlier than the last rendered frame (3638.62 s).
Selected video track: []
Selected video track: [6]
Dropping frame with timestamp 3685.1 s, which is earlier than the last rendered frame (3685.1 s).
Dropping frame with timestamp 3685.1 s, which is earlier than the last rendered frame (3685.1 s).

[giladna]

[giladna]

@robwalch I have shared with you in privately on slack

thanks!

[giladna]

@robwalch we have verified it as well both on LG TV and on Chrome

[giladna]

thank you for your quick support!