mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
fix(web): stale adaptive image when original overlays preview (#27621)
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:
@@ -124,9 +124,6 @@ export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTML
|
|||||||
{ capture: true, signal },
|
{ capture: true, signal },
|
||||||
);
|
);
|
||||||
|
|
||||||
if (options?.zoomTarget) {
|
|
||||||
options.zoomTarget.style.willChange = 'transform';
|
|
||||||
}
|
|
||||||
node.style.overflow = 'visible';
|
node.style.overflow = 'visible';
|
||||||
node.style.touchAction = 'none';
|
node.style.touchAction = 'none';
|
||||||
return {
|
return {
|
||||||
@@ -138,9 +135,6 @@ export const zoomImageAction = (node: HTMLElement, options?: { zoomTarget?: HTML
|
|||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
controller.abort();
|
controller.abort();
|
||||||
if (options?.zoomTarget) {
|
|
||||||
options.zoomTarget.style.willChange = '';
|
|
||||||
}
|
|
||||||
for (const unsubscribe of unsubscribes) {
|
for (const unsubscribe of unsubscribes) {
|
||||||
unsubscribe();
|
unsubscribe();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -148,7 +148,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</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?.()}
|
{@render backdrop?.()}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user