helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2026-08-15 13:03:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): stale adaptive image when original overlays preview (#27621)

Browse source 
AdaptiveImage stacks quality layers (thumbnail → preview → original) as they load. Without compositor layer promotion on the container, the browser could render a stale frame when the original-quality layer was overlaid on top of the preview-quality layer.

Add `will-change: transform` as a class on AdaptiveImage's root element so it gets a dedicated compositor layer from first paint. This also subsumes the imperative `style.willChange = 'transform'` that zoomImageAction was applying to the same element (the zoom target from photo-viewer is the AdaptiveImage root), so drop that now-redundant code.

Change-Id: Icd866a2bb5a5fce299c36404547fa0546a6a6964
This commit is contained in:
Min Idzelis 2026-04-15 21:19:18 -04:00 • committed by GitHub
parent 4aa31d38bf
commit 50557002b7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 1 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/actions/zoom-image.ts
View file

@ -124,9 +124,6 @@ export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTML
{ capture: true, signal },
);
if (options?.zoomTarget) {
options.zoomTarget.style.willChange = 'transform';
}
node.style.overflow = 'visible';
node.style.touchAction = 'none';
return {
@ -138,9 +135,6 @@ export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTML
},
destroy() {
controller.abort();
if (options?.zoomTarget) {
options.zoomTarget.style.willChange = '';
}
for (const unsubscribe of unsubscribes) {
unsubscribe();
}

2
web/src/lib/components/AdaptiveImage.svelte
View file

@ -148,7 +148,7 @@
});
</script>
<div class="relative h-full w-full overflow-hidden will-change-transform" bind:this={ref}>
<div class="relative h-full w-full overflow-hidden" bind:this={ref}>
{@render backdrop?.()}
<div