Scrollbar within Scroll Capture UI missing

[td7932]

The scrollbar within the UI seems to be missing. I can add events but can't scroll up and down to change properties and tweak them. I can resize the UI to show more, but it's very limiting. The extension was working fine last week.

[patrickmatte]

There's nothing wrong with the scroll capture panel. Just try it on another URL. Since the panel is added to the html page, sometimes the website's javascript or css code can mess up the panel. The website's developers might be preventing the scroll event to bubble up for some weird reason and that would prevent you from scrolling the panel. There should be a little scrollbar on the side of the panel that you can pull it up and down if scrolling doesn't work. I don't know why you're not seeing it, maybe the website's CSS or one of your other extensions is breaking the little scrollbar on the side of the panel. What URL are you trying to capture?

[td7932]

Thanks for the response.

There should be a little scrollbar on the side of the panel that you can pull it up and down if scrolling doesn't work. I don't know why you're not seeing it, maybe the website's CSS or one of your other extensions is breaking the little scrollbar on the side of the panel.

Regardless of which URL I try, the scrollbar within the panel is not showing up. Like I said, I successfully captured several different websites last week, and the scrollbar within the panel was visible and functioning as expected. The other extensions I'm using haven't changed, so I don't think that's the issue. I'm using Chrome on Windows 11, Version 126.0.6478.115 (Official Build) (64-bit).

[carolinebeavon]

I've faced the same issue as above - Seems to be a sizing / zoom issue. I thought I'd fixed it by dragging the right hand side of the panel left and right. As the content in the panel gets smaller, the icons across the bottom appear.

https://github.com/patrickmatte/scroll-capture/assets/68392646/4e29a522-c971-45eb-a1ca-20e3418bf65f

BUT: once you add more boxes and hit the minimum width of the panel you lose the icons again.

[patrickmatte]

This is what the panel should look like when you resize. What URL were you looking at? https://github.com/patrickmatte/scroll-capture/assets/435963/e6ff9f9d-edee-43cb-8bd6-9aff12702a71

[carolinebeavon]

Its the same on all pages I try (for example this https://www.carolinebeavon.com/work and even this one on Github)

(sorry about the terrible quality - recorded trying to capture this page - hope it helps) https://github.com/patrickmatte/scroll-capture/assets/68392646/d1c5d518-427b-47f6-9ce3-6ea9e7fe601b

[reinisrozensteins]

We have the same problem on MAC and this problem start when update Google Crome to 126.0.6478.63 version.

My friend didnt update and for him working fine.

[patrickmatte]

Ok I just updated Chrome from 125 to 126 and I'm now seeing this bug too. I can't even see a video at the end of the capture.

[patrickmatte]

MP4 video is also broken on Chrome 126 but you can use WEBM video in the meantime.

[sholom00]

I'm having this issue as well. Also on Mac and on Chrome 126

[sholom00]

As a temporary workaround, albeit a really annoying one, is to inspect element on the interface box and in the "sc-container" div, change "overflow: clip" to "overflow: auto". You will have to do this every time the page reloads.

[patrickmatte]

@sholom00 Great idea. Make it easier and add a CSS action like this and press the play button

[sholom00]

Yes! I was just about to post this alternative workaround method as well. Important to note that if you have a page reload as part of your capture sequence, move the css action below the page reload. Obvious, but took me a minute to realize why it wasn't adding it. Thanks for adding that!

@sholom00 Great idea. Make it easier and add a CSS action like this and press the play button

[patrickmatte]

The panel scrolling bug seems to come from flex-grow and flex-shrink not behaving the same way that they used to in Chrome 125 and below. I've filed a bug report. The issue with MP4 seems to come from Chrome 126 now supporting sreen recording in MP4 format natively without the use of FFMPEG. I'm super busy with other stuff right now but I'll try to look into this and push a fix asap.

[patrickmatte]

The bugs with Chrome 126 are now resolved in version 0.4.5

[td7932]

Thank you! Really appreciate it.

[carolinebeavon]

Thank you for fixing this so quickly ... it's SUCH a useful tool ...

[eriiform]

Hi, I'm using a Mac running Chrome Version 128.0.6613.114 (Official Build) (arm64) and the sidebar is missing for me as well. It makes it impossible to use, sadly. Using the CSS hack also, unfortunately, doesn't work for me.

https://github.com/user-attachments/assets/a6f37363-c46a-4022-abe5-3dd2130263b5

Any ideas? It's the same running it in Brave 1.69.160.

[patrickmatte]

What the url of that website? Have you tried the extension on another website?

[eriiform]

It's written in the Load URL box. I just checked Screen Capture on other sites and I do see the scroll bar when on them. What do you think is causing the issue? Is there an idea for another workaround? Thanks for your help. Awesome tool btw.

[eriiform]

I guess I could try and scroll the Screen Capture timeline when on another URL, since it saves everything.

[patrickmatte]

haha. very smart! I'm investigating. It is possible that the webstie uses a custom scroll library which hacks the scroll of the website and that may be intefering with the scroll capture panel scroll. But normally you should see a scrollbar but it looks like the website is also hiding all scrollbars... That's the problem with adding the extension panel in the website, the website's css sometimes messes up the extension panel.

[patrickmatte]

Can you add a css action and paste this code in it. Then pless that action's play button to add the css.

::-webkit-scrollbar { display: block !important; }

That will override the website's css that hides the scrollbar. You still won't be able to scroll the panel normally but you can at least grab the scrollbar to scroll it manually.

[eriiform]

This is much better than my workaround. Thank you!