When hovering over the slider preview, the image preview (sprite) API is being called and canceled repeatedly.

Question

When hovering over the slider preview, the image preview (sprite) API is being called and canceled repeatedly.

Truong-vuong opened this issue 3 months ago · comments

Current Behavior:

In version 1.11, when hovering over the slider preview, the image preview (sprite) API is being called and canceled repeatedly, resulting in a flickering preview image.

preview-image.mp4

Expected Behavior:

The sprite API should only be called once, as in previous versions (1.10), to ensure a smoother preview image display.

Steps To Reproduce:

Hovering over the slider preview

Environment:

Framework: web-components
Node: 18.17.0
Device: Windows 10 64-bit
Browser: Chrome@22

Anything Else?

Rahim · Answer 1 · Tue Jun 11 2024 19:55:12 GMT+0800 (China Standard Time)

I can't repro this in latest, are you still experiencing this on 1.11.22@next? If yes, can you share your sprite file setup (short snippet is fine).

Truong-vuong · Answer 2 · Wed Jun 19 2024 15:58:30 GMT+0800 (China Standard Time)

This is my sprite file setup @mihar-22
WEBVTT

00:00:00.000 --> 00:00:00.999
storyboard.jpg#xywh=0,0,180,100

00:00:01.000 --> 00:00:01.999
storyboard.jpg#xywh=180,0,180,100

00:00:02.000 --> 00:00:02.999
storyboard.jpg#xywh=360,0,180,100

00:00:03.000 --> 00:00:03.999
storyboard.jpg#xywh=540,0,180,100

00:00:04.000 --> 00:00:04.999
storyboard.jpg#xywh=720,0,180,100

00:00:05.000 --> 00:00:05.999
storyboard.jpg#xywh=900,0,180,100

00:00:06.000 --> 00:00:06.999
storyboard.jpg#xywh=1080,0,180,100

00:00:07.000 --> 00:00:07.999
storyboard.jpg#xywh=1260,0,180,100

00:00:08.000 --> 00:00:08.999
storyboard.jpg#xywh=1440,0,180,100

00:00:09.000 --> 00:00:09.999
storyboard.jpg#xywh=1620,0,180,100

00:00:10.000 --> 00:00:10.999
storyboard.jpg#xywh=1800,0,180,100

00:00:11.000 --> 00:00:11.999
storyboard.jpg#xywh=1980,0,180,100

00:00:12.000 --> 00:00:12.999
storyboard.jpg#xywh=2160,0,180,100

00:00:13.000 --> 00:00:13.999
storyboard.jpg#xywh=2340,0,180,100

00:00:14.000 --> 00:00:14.999
storyboard.jpg#xywh=2520,0,180,100

00:00:15.000 --> 00:00:15.999
storyboard.jpg#xywh=0,100,180,100

00:00:16.000 --> 00:00:16.999
storyboard.jpg#xywh=180,100,180,100

00:00:17.000 --> 00:00:17.999
storyboard.jpg#xywh=360,100,180,100

00:00:18.000 --> 00:00:18.999
storyboard.jpg#xywh=540,100,180,100

00:00:19.000 --> 00:00:19.999
storyboard.jpg#xywh=720,100,180,100

00:00:20.000 --> 00:00:20.999
storyboard.jpg#xywh=900,100,180,100

00:00:21.000 --> 00:00:21.999
storyboard.jpg#xywh=1080,100,180,100

00:00:22.000 --> 00:00:22.999
storyboard.jpg#xywh=1260,100,180,100

00:00:23.000 --> 00:00:23.999
storyboard.jpg#xywh=1440,100,180,100

00:00:24.000 --> 00:00:24.999
storyboard.jpg#xywh=1620,100,180,100

00:00:25.000 --> 00:00:25.999
storyboard.jpg#xywh=1800,100,180,100

00:00:26.000 --> 00:00:26.999
storyboard.jpg#xywh=1980,100,180,100

00:00:27.000 --> 00:00:27.999
storyboard.jpg#xywh=2160,100,180,100

00:00:28.000 --> 00:00:28.999
storyboard.jpg#xywh=2340,100,180,100

00:00:29.000 --> 00:00:29.999
storyboard.jpg#xywh=2520,100,180,100

00:00:30.000 --> 00:00:30.999
storyboard.jpg#xywh=0,200,180,100

00:00:31.000 --> 00:00:31.999
storyboard.jpg#xywh=180,200,180,100

00:00:32.000 --> 00:00:32.999
storyboard.jpg#xywh=360,200,180,100

00:00:33.000 --> 00:00:33.999
storyboard.jpg#xywh=540,200,180,100

00:00:34.000 --> 00:00:34.999
storyboard.jpg#xywh=720,200,180,100

00:00:35.000 --> 00:00:35.999
storyboard.jpg#xywh=900,200,180,100

00:00:36.000 --> 00:00:36.999
storyboard.jpg#xywh=1080,200,180,100

00:00:37.000 --> 00:00:37.999
storyboard.jpg#xywh=1260,200,180,100

00:00:38.000 --> 00:00:38.999
storyboard.jpg#xywh=1440,200,180,100

00:00:39.000 --> 00:00:39.999
storyboard.jpg#xywh=1620,200,180,100

00:00:40.000 --> 00:00:40.999
storyboard.jpg#xywh=1800,200,180,100

00:00:41.000 --> 00:00:41.999
storyboard.jpg#xywh=1980,200,180,100

00:00:42.000 --> 00:00:42.999
storyboard.jpg#xywh=2160,200,180,100

00:00:43.000 --> 00:00:43.999
storyboard.jpg#xywh=2340,200,180,100

00:00:44.000 --> 00:00:44.999
storyboard.jpg#xywh=2520,200,180,100

00:00:45.000 --> 00:00:45.999
storyboard.jpg#xywh=0,300,180,100

00:00:46.000 --> 00:00:46.999
storyboard.jpg#xywh=180,300,180,100

00:00:47.000 --> 00:00:47.999
storyboard.jpg#xywh=360,300,180,100

00:00:48.000 --> 00:00:48.999
storyboard.jpg#xywh=540,300,180,100

00:00:49.000 --> 00:00:49.999
storyboard.jpg#xywh=720,300,180,100

00:00:50.000 --> 00:00:50.999
storyboard.jpg#xywh=900,300,180,100

00:00:51.000 --> 00:00:51.999
storyboard.jpg#xywh=1080,300,180,100

00:00:52.000 --> 00:00:52.999
storyboard.jpg#xywh=1260,300,180,100

00:00:53.000 --> 00:00:53.999
storyboard.jpg#xywh=1440,300,180,100

00:00:54.000 --> 00:00:54.999
storyboard.jpg#xywh=1620,300,180,100

00:00:55.000 --> 00:00:55.999
storyboard.jpg#xywh=1800,300,180,100

00:00:56.000 --> 00:00:56.999
storyboard.jpg#xywh=1980,300,180,100

00:00:57.000 --> 00:00:57.999
storyboard.jpg#xywh=2160,300,180,100

00:00:58.000 --> 00:00:58.999
storyboard.jpg#xywh=2340,300,180,100

00:00:59.000 --> 00:00:59.999
storyboard.jpg#xywh=2520,300,180,100

00:01:00.000 --> 00:01:00.999
storyboard.jpg#xywh=0,400,180,100

00:01:01.000 --> 00:01:01.999
storyboard.jpg#xywh=180,400,180,100

00:01:02.000 --> 00:01:02.999
storyboard.jpg#xywh=360,400,180,100

00:01:03.000 --> 00:01:03.999
storyboard.jpg#xywh=540,400,180,100

00:01:04.000 --> 00:01:04.999
storyboard.jpg#xywh=720,400,180,100

00:01:05.000 --> 00:01:05.999
storyboard.jpg#xywh=900,400,180,100

00:01:06.000 --> 00:01:06.999
storyboard.jpg#xywh=1080,400,180,100

00:01:07.000 --> 00:01:07.999
storyboard.jpg#xywh=1260,400,180,100

00:01:08.000 --> 00:01:08.999
storyboard.jpg#xywh=1440,400,180,100

00:01:09.000 --> 00:01:09.999
storyboard.jpg#xywh=1620,400,180,100

00:01:10.000 --> 00:01:10.999
storyboard.jpg#xywh=1800,400,180,100

00:01:11.000 --> 00:01:11.999
storyboard.jpg#xywh=1980,400,180,100

00:01:12.000 --> 00:01:12.999
storyboard.jpg#xywh=2160,400,180,100

00:01:13.000 --> 00:01:13.999
storyboard.jpg#xywh=2340,400,180,100

00:01:14.000 --> 00:01:14.999
storyboard.jpg#xywh=2520,400,180,100

00:01:15.000 --> 00:01:15.999
storyboard.jpg#xywh=0,500,180,100

00:01:16.000 --> 00:01:16.999
storyboard.jpg#xywh=180,500,180,100

00:01:17.000 --> 00:01:17.999
storyboard.jpg#xywh=360,500,180,100

00:01:18.000 --> 00:01:18.999
storyboard.jpg#xywh=540,500,180,100

00:01:19.000 --> 00:01:19.999
storyboard.jpg#xywh=720,500,180,100

00:01:20.000 --> 00:01:20.999
storyboard.jpg#xywh=900,500,180,100

00:01:21.000 --> 00:01:21.999
storyboard.jpg#xywh=1080,500,180,100

00:01:22.000 --> 00:01:22.999
storyboard.jpg#xywh=1260,500,180,100

00:01:23.000 --> 00:01:23.999
storyboard.jpg#xywh=1440,500,180,100

00:01:24.000 --> 00:01:24.999
storyboard.jpg#xywh=1620,500,180,100

00:01:25.000 --> 00:01:25.999
storyboard.jpg#xywh=1800,500,180,100

00:01:26.000 --> 00:01:26.999
storyboard.jpg#xywh=1980,500,180,100

00:01:27.000 --> 00:01:27.999
storyboard.jpg#xywh=2160,500,180,100

00:01:28.000 --> 00:01:28.999
storyboard.jpg#xywh=2340,500,180,100

00:01:29.000 --> 00:01:29.999
storyboard.jpg#xywh=2520,500,180,100

00:01:30.000 --> 00:01:30.999
storyboard.jpg#xywh=0,600,180,100

00:01:31.000 --> 00:01:31.999
storyboard.jpg#xywh=180,600,180,100

00:01:32.000 --> 00:01:32.999
storyboard.jpg#xywh=360,600,180,100

00:01:33.000 --> 00:01:33.999
storyboard.jpg#xywh=540,600,180,100

00:01:34.000 --> 00:01:34.999
storyboard.jpg#xywh=720,600,180,100

00:01:35.000 --> 00:01:35.999
storyboard.jpg#xywh=900,600,180,100

00:01:36.000 --> 00:01:36.999
storyboard.jpg#xywh=1080,600,180,100

00:01:37.000 --> 00:01:37.999
storyboard.jpg#xywh=1260,600,180,100

00:01:38.000 --> 00:01:38.999
storyboard.jpg#xywh=1440,600,180,100

00:01:39.000 --> 00:01:39.999
storyboard.jpg#xywh=1620,600,180,100

00:01:40.000 --> 00:01:40.999
storyboard.jpg#xywh=1800,600,180,100

00:01:41.000 --> 00:01:41.999
storyboard.jpg#xywh=1980,600,180,100

00:01:42.000 --> 00:01:42.999
storyboard.jpg#xywh=2160,600,180,100

00:01:43.000 --> 00:01:43.999
storyboard.jpg#xywh=2340,600,180,100

00:01:44.000 --> 00:01:44.999
storyboard.jpg#xywh=2520,600,180,100

00:01:45.000 --> 00:01:45.999
storyboard.jpg#xywh=0,700,180,100

00:01:46.000 --> 00:01:46.999
storyboard.jpg#xywh=180,700,180,100

00:01:47.000 --> 00:01:47.999
storyboard.jpg#xywh=360,700,180,100

00:01:48.000 --> 00:01:48.999
storyboard.jpg#xywh=540,700,180,100

00:01:49.000 --> 00:01:49.999
storyboard.jpg#xywh=720,700,180,100

00:01:50.000 --> 00:01:50.999
storyboard.jpg#xywh=900,700,180,100

00:01:51.000 --> 00:01:51.999
storyboard.jpg#xywh=1080,700,180,100

00:01:52.000 --> 00:01:52.999
storyboard.jpg#xywh=1260,700,180,100

00:01:53.000 --> 00:01:53.999
storyboard.jpg#xywh=1440,700,180,100

00:01:54.000 --> 00:01:54.999
storyboard.jpg#xywh=1620,700,180,100

00:01:55.000 --> 00:01:55.999
storyboard.jpg#xywh=1800,700,180,100

00:01:56.000 --> 00:01:56.999
storyboard.jpg#xywh=1980,700,180,100

00:01:57.000 --> 00:01:57.999
storyboard.jpg#xywh=2160,700,180,100

00:01:58.000 --> 00:01:58.999
storyboard.jpg#xywh=2340,700,180,100

00:01:59.000 --> 00:01:59.999
storyboard.jpg#xywh=2520,700,180,100

00:02:00.000 --> 00:02:00.999
storyboard.jpg#xywh=0,800,180,100

00:02:01.000 --> 00:02:01.999
storyboard.jpg#xywh=180,800,180,100

00:02:02.000 --> 00:02:02.999
storyboard.jpg#xywh=360,800,180,100

00:02:03.000 --> 00:02:03.999
storyboard.jpg#xywh=540,800,180,100

00:02:04.000 --> 00:02:04.999
storyboard.jpg#xywh=720,800,180,100

00:02:05.000 --> 00:02:05.999
storyboard.jpg#xywh=900,800,180,100

00:02:06.000 --> 00:02:06.999
storyboard.jpg#xywh=1080,800,180,100

00:02:07.000 --> 00:02:07.999
storyboard.jpg#xywh=1260,800,180,100

00:02:08.000 --> 00:02:08.999
storyboard.jpg#xywh=1440,800,180,100

00:02:09.000 --> 00:02:09.999
storyboard.jpg#xywh=1620,800,180,100

00:02:10.000 --> 00:02:10.999
storyboard.jpg#xywh=1800,800,180,100

00:02:11.000 --> 00:02:11.999
storyboard.jpg#xywh=1980,800,180,100

00:02:12.000 --> 00:02:12.999
storyboard.jpg#xywh=2160,800,180,100

00:02:13.000 --> 00:02:13.999
storyboard.jpg#xywh=2340,800,180,100

00:02:14.000 --> 00:02:14.999
storyboard.jpg#xywh=2520,800,180,100

00:02:15.000 --> 00:02:15.999
storyboard.jpg#xywh=0,900,180,100

00:02:16.000 --> 00:02:16.999
storyboard.jpg#xywh=180,900,180,100

00:02:17.000 --> 00:02:17.999
storyboard.jpg#xywh=360,900,180,100

00:02:18.000 --> 00:02:18.999
storyboard.jpg#xywh=540,900,180,100

00:02:19.000 --> 00:02:19.999
storyboard.jpg#xywh=720,900,180,100

00:02:20.000 --> 00:02:20.999
storyboard.jpg#xywh=900,900,180,100

00:02:21.000 --> 00:02:21.999
storyboard.jpg#xywh=1080,900,180,100

00:02:22.000 --> 00:02:22.999
storyboard.jpg#xywh=1260,900,180,100

00:02:23.000 --> 00:02:23.999
storyboard.jpg#xywh=1440,900,180,100

00:02:24.000 --> 00:02:24.999
storyboard.jpg#xywh=1620,900,180,100

00:02:25.000 --> 00:02:25.999
storyboard.jpg#xywh=1800,900,180,100

00:02:26.000 --> 00:02:26.999
storyboard.jpg#xywh=1980,900,180,100

00:02:27.000 --> 00:02:27.999
storyboard.jpg#xywh=2160,900,180,100

00:02:28.000 --> 00:02:28.999
storyboard.jpg#xywh=2340,900,180,100

00:02:29.000 --> 00:02:29.999
storyboard.jpg#xywh=2520,900,180,100

00:02:30.000 --> 00:02:30.999
storyboard.jpg#xywh=0,1000,180,100

00:02:31.000 --> 00:02:31.999
storyboard.jpg#xywh=180,1000,180,100

00:02:32.000 --> 00:02:32.999
storyboard.jpg#xywh=360,1000,180,100

00:02:33.000 --> 00:02:33.999
storyboard.jpg#xywh=540,1000,180,100

00:02:34.000 --> 00:02:34.999
storyboard.jpg#xywh=720,1000,180,100

00:02:35.000 --> 00:02:35.999
storyboard.jpg#xywh=900,1000,180,100

00:02:36.000 --> 00:02:36.999
storyboard.jpg#xywh=1080,1000,180,100

00:02:37.000 --> 00:02:37.999
storyboard.jpg#xywh=1260,1000,180,100

00:02:38.000 --> 00:02:38.999
storyboard.jpg#xywh=1440,1000,180,100

00:02:39.000 --> 00:02:39.999
storyboard.jpg#xywh=1620,1000,180,100

00:02:40.000 --> 00:02:40.999
storyboard.jpg#xywh=1800,1000,180,100

00:02:41.000 --> 00:02:41.999
storyboard.jpg#xywh=1980,1000,180,100

00:02:42.000 --> 00:02:42.999
storyboard.jpg#xywh=2160,1000,180,100

00:02:43.000 --> 00:02:43.999
storyboard.jpg#xywh=2340,1000,180,100

00:02:44.000 --> 00:02:44.999
storyboard.jpg#xywh=2520,1000,180,100

00:02:45.000 --> 00:02:45.999
storyboard.jpg#xywh=0,1100,180,100

00:02:46.000 --> 00:02:46.999
storyboard.jpg#xywh=180,1100,180,100

00:02:47.000 --> 00:02:47.999
storyboard.jpg#xywh=360,1100,180,100

00:02:48.000 --> 00:02:48.999
storyboard.jpg#xywh=540,1100,180,100

00:02:49.000 --> 00:02:49.999
storyboard.jpg#xywh=720,1100,180,100

00:02:50.000 --> 00:02:50.999
storyboard.jpg#xywh=900,1100,180,100

00:02:51.000 --> 00:02:51.999
storyboard.jpg#xywh=1080,1100,180,100

00:02:52.000 --> 00:02:52.999
storyboard.jpg#xywh=1260,1100,180,100

00:02:53.000 --> 00:02:53.999
storyboard.jpg#xywh=1440,1100,180,100

00:02:54.000 --> 00:02:54.999
storyboard.jpg#xywh=1620,1100,180,100

00:02:55.000 --> 00:02:55.999
storyboard.jpg#xywh=1800,1100,180,100

00:02:56.000 --> 00:02:56.999
storyboard.jpg#xywh=1980,1100,180,100

00:02:57.000 --> 00:02:57.999
storyboard.jpg#xywh=2160,1100,180,100

00:02:58.000 --> 00:02:58.999
storyboard.jpg#xywh=2340,1100,180,100

00:02:59.000 --> 00:02:59.999
storyboard.jpg#xywh=2520,1100,180,100

00:03:00.000 --> 00:03:00.999
storyboard.jpg#xywh=0,1200,180,100

00:03:01.000 --> 00:03:01.999
storyboard.jpg#xywh=180,1200,180,100

00:03:02.000 --> 00:03:02.999
storyboard.jpg#xywh=360,1200,180,100

00:03:03.000 --> 00:03:03.999
storyboard.jpg#xywh=540,1200,180,100

00:03:04.000 --> 00:03:04.999
storyboard.jpg#xywh=720,1200,180,100

00:03:05.000 --> 00:03:05.999
storyboard.jpg#xywh=900,1200,180,100

00:03:06.000 --> 00:03:06.999
storyboard.jpg#xywh=1080,1200,180,100

00:03:07.000 --> 00:03:07.999
storyboard.jpg#xywh=1260,1200,180,100

00:03:08.000 --> 00:03:08.999
storyboard.jpg#xywh=1440,1200,180,100

00:03:09.000 --> 00:03:09.999
storyboard.jpg#xywh=1620,1200,180,100

00:03:10.000 --> 00:03:10.999
storyboard.jpg#xywh=1800,1200,180,100

00:03:11.000 --> 00:03:11.999
storyboard.jpg#xywh=1980,1200,180,100

00:03:12.000 --> 00:03:12.999
storyboard.jpg#xywh=2160,1200,180,100

00:03:13.000 --> 00:03:13.999
storyboard.jpg#xywh=2340,1200,180,100

Truong-vuong · Answer 3 · Wed Jun 19 2024 17:17:03 GMT+0800 (China Standard Time)

Link demo: https://www.vidstack.io/player/demo?framework=wc&view=player&config=%7B%22player%22%3A%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2F720p.mp4%22%2C%22viewType%22%3A%22video%22%2C%22streamType%22%3A%22on-demand%22%2C%22logLevel%22%3A%22warn%22%2C%22crossOrigin%22%3Atrue%2C%22playsInline%22%3Atrue%2C%22title%22%3A%22Sprite+Fight%22%2C%22poster%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fposter.webp%22%2C%22textTracks%22%3A%5B%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fsubs%2Fenglish.vtt%22%2C%22label%22%3A%22English%22%2C%22language%22%3A%22en-US%22%2C%22kind%22%3A%22subtitles%22%2C%22type%22%3A%22vtt%22%2C%22default%22%3Atrue%7D%2C%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fsubs%2Fspanish.vtt%22%2C%22label%22%3A%22Spanish%22%2C%22language%22%3A%22es-ES%22%2C%22kind%22%3A%22subtitles%22%2C%22type%22%3A%22vtt%22%7D%2C%7B%22src%22%3A%22https%3A%2F%2Ffiles.vidstack.io%2Fsprite-fight%2Fchapters.vtt%22%2C%22language%22%3A%22en-US%22%2C%22kind%22%3A%22chapters%22%2C%22type%22%3A%22vtt%22%2C%22default%22%3Atrue%7D%5D%7D%2C%22layout%22%3A%7B%22type%22%3A%22default%22%2C%22thumbnails%22%3A%22https%3A%2F%2Fhls.drberg.com%2Fmigrated-assets%2Fmembership-site-fixed-final%2Fstoryboard.vtt%22%7D%2C%22hls%22%3A%7B%7D%2C%22dash%22%3A%7B%7D%2C%22events%22%3A%5B%22can-play%22%5D%7D&preset=video

Rahim · Answer 4 · Wed Jun 19 2024 18:59:33 GMT+0800 (China Standard Time)

I'm not able to reproduce the issue. It seems to be happening in your application only? It's also not happening the demo link provided.

Truong-vuong · Answer 5 · Wed Jun 19 2024 19:45:03 GMT+0800 (China Standard Time)

@mihar-22 Does your Chrome have this option checked? Mine is checked and it causes an error. I want to ask how you can check "disable cache" but still call the preview thumbnail image only once like yours.

Rahim · Answer 6 · Thu Jun 20 2024 20:04:43 GMT+0800 (China Standard Time)

It's happening because of precision of the current playback time against start and end times.

00:00:00.000 --> 00:00:00.999
storyboard.jpg#xywh=0,0,180,100

00:00:01.000 --> 00:00:01.999
storyboard.jpg#xywh=180,0,180,100

Change to:

00:00:00.000 --> 00:00:01.000
storyboard.jpg#xywh=0,0,180,100

00:00:01.000 --> 00:00:02.000
storyboard.jpg#xywh=180,0,180,100

Truong-vuong · Answer 7 · Fri Jun 21 2024 10:27:34 GMT+0800 (China Standard Time)

I followed your suggestion and it's bug-free now, that's amazing, thank you so much! <3