Images in the left-hand “EntryInfo” panel are sometimes cropped until you scroll

[LeDevNovice]

What happened ?

When the EntryInfo side panel first slides in, the header illustration is sometimes rendered with the top-left quarter only visible (example : “Adolin is born”). As soon as you scroll a single pixel, the image jumps to the correct position and size.

I will be happy to submit a PR if you’d like – let me know ! Great works guys, from a Cosmere fan !

Steps to reproduce

1. Open https://roshar.17thshard.com/#/en-US.

2. Click the search icon and search for Adolin is born.

3. Select the result so the EntryInfo panel opens.

4. Observe that the header image is mis-positioned.

5. Scroll inside the panel – the image immediately snaps into place.

Expected behaviour

The illustration should be displayed correctly from the moment the panel appears.

Environment

Windows 11 and Chrome browser.

Screenshots

[marvin-roesch]

Hm, interesting. Thanks for reporting this, @LeDevNovice!

I cannot reproduce this myself right now. There is a bit of snapping happening when opening the detail view on a viewport that's too small in height, but it all rectifies itself without having to interact.

We have to do some trickery to achieve that effect of the text scrolling over the image. So it's very likely some failed interaction there. This is mainly happening here:

roshar-map/src/components/Details.vue

Lines 255 to 269 in 6ce0cdc

	handler (newUrl) {
	if (newUrl !== undefined) {
	const image = new Image()
	image.src = newUrl
	image.onload = () => {
	this.imageAspect = image.height / image.width
	const actualHeight = this.imageAspect * this.$el.clientWidth
	if (actualHeight >= window.innerHeight) {
	this.$refs.scroller.scrollTo({ y: actualHeight * 0.5 })
	}
	}
	}
	},

I'll try further to reproduce this myself, but a contributed fix of course always is welcome 😄

[LeDevNovice]

Hello @marvin-roesch

I think you’re looking in exactly the right place for me. If I understand correctly the codebase, Details.vue is where the panel decides how far to auto-scroll after an illustration finishes loading. I don't try to reproduce in local for now, but will try in the future.

For me what actually happens is that Image.onload fires while the sidebar is still sliding in (so it’s translated off-screen). At that moment this.$el.clientWidth is 0px (or very small), therefore const actualHeight = this.imageAspect * this.$el.clientWidth // → 0

And then we scroll the <vuescroll> container by 0.5 × actualHeight, which is still 0, possibly leaving the illustration mis-positioned. So as soon as the user moves the wheel, scrollTop is re-evaluated, Vue re-reads clientWidth (now correct) and everything “pops” into place – that’s the jump that I'm seeing for me.

Maybe on machines where the image loads a bit later (or the CSS transition finishes sooner) the race never happens, which is why it’s hard to reproduce consistently. By the way, I have tested on multiple case and it is not happens on every images.

I will try soon to test a fix implementation locally on my machine if possible ;-)