bug: Unable to scroll through long image caption indirectly

[irfanhakim-as]

💡 Summary

As per title: "Unable to scroll through long image caption indirectly". I wish I could describe it better but what I mean by indirectly is by hovering or pressing on the location where the image caption is, and scrolling via scroll wheel, or trackpad - neither of them works. Scrolling only works when scrolling "directly" or "actively" via the scroll bar while on desktop/mobile, or via touch (at least on mobile).

🥰 Expected Behavior

• Scrolling on the image caption indirectly using touch (i.e. on mobile), scroll wheel, or trackpad should scroll through the image caption as per user input.

• Scrolling on the image caption directly using the provided scroll bar desktop/mobile should scroll through the image caption as per scroll bar movement.

🤬 Actual Behavior

• Scrolling on the image caption indirectly on desktop using scroll wheel, or trackpad does not work ❌

• Scrolling on the image caption indirectly on mobile using touch works ✔️

• Scrolling on the image caption directly using the provided scroll bar on desktop/mobile works and does scroll through the image caption as per scroll bar movement ✔️

📝 Steps to Reproduce

1. Load this note on a Sharkey server (i.e. kitsunes.club): https://kitsunes.club/notes/9mackodtqe.
2. Click/tap on the image to open the detailed image preview.
3. Hover/press on the image caption area at the bottom and scroll using touch, scroll wheel, or trackpad.
4. If that method indeed does not work, try pressing and scrolling using the provided scroll bar instead to verify that this different method does work.

💻 Frontend Environment

Device 1 (Desktop)

* Model and OS of the device(s): AMD Ryzen + NVIDIA GPU PC, EndeavourOS Linux x86_64, 6.6.1-arch1-1
* Browser: Mozilla Firefox 119.0.1 (64-bit), Google Chrome 119.0.6045.159 (Official Build) unknown (64-bit)
* Server URL: kitsunes.club
* Misskey: Sharkey 2023.11.0

Device 2 (Mobile)

* Model and OS of the device(s): iPhone 11, iOS 17.1
* Browser: Mozilla Firefox 120.0 (as PWA)
* Server URL: kitsunes.club
* Misskey: Sharkey 2023.11.0

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

[Mar0xy]

This could actually be two factors it could be a issue with photoswipe (the module that is used for displaying those views) https://photoswipe.com/

Or by the custom CSS Misskey applies to it

Sharkey/packages/frontend/src/components/MkMediaList.vue

Lines 366 to 397 in 19fc5a7

	<style lang="scss">
	.pswp__bg {
	background: var(--modalBg);
	backdrop-filter: var(--modalBgFilter);
	}
	.pwsp__alt-text-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 75%;
	max-width: 800px;
	}
	.pwsp__alt-text {
	color: var(--fg);
	margin: 0 auto;
	text-align: center;
	padding: var(--margin);
	border-radius: var(--radius);
	max-height: 8em;
	overflow-y: auto;
	text-shadow: var(--bg) 0 0 10px, var(--bg) 0 0 3px, var(--bg) 0 0 3px;
	white-space: pre-line;
	}
	</style>

As no one on our team really knows CSS it would be of help if some other people could look at this.

[irfanhakim-as]

Noted. I've also updated the issue to update the fact that it does work via touch, at least on mobile. Not sure if it works via touch on desktop.

On my end so far with the Frontend Environment I'm testing, scrolling only does not work using the mouse scroll wheel or trackpad, while on desktop.