gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-08 10:50:58 +00:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

fix: Fix zoomed images blurry in Safari (#35052)

Browse Source
This commit is contained in:
diondiondion 2025-06-16 12:37:41 +02:00 committed by GitHub
parent 4d29215ad3
commit ad32834ccd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/mastodon/features/ui/components/zoomable_image.tsx
View File

@ -2,7 +2,7 @@ import { useState, useCallback, useRef, useEffect } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { useSpring, animated, config } from '@react-spring/web'; import { useSpring, animated, config, to } from '@react-spring/web';
import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react'; import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
import { Blurhash } from 'mastodon/components/blurhash'; import { Blurhash } from 'mastodon/components/blurhash';
@ -276,6 +276,13 @@ export const ZoomableImage: React.FC<ZoomableImageProps> = ({
setError(true); setError(true);
}, [setError]); }, [setError]);
// Convert the default style transform to a matrix transform to work around
// Safari bug https://github.com/mastodon/mastodon/issues/35042
const transform = to(
[style.scale, style.x, style.y],
(s, x, y) => `matrix(${s}, 0, 0, ${s}, ${x}, ${y})`,
);
return ( return (
<div <div
className={classNames('zoomable-image', { className={classNames('zoomable-image', {
@ -298,7 +305,7 @@ export const ZoomableImage: React.FC<ZoomableImageProps> = ({
)} )}
<animated.img <animated.img
style={style} style={{ transform }}
role='presentation' role='presentation'
ref={imageRef} ref={imageRef}
alt={alt} alt={alt}