Javascript 为什么缩放模式在Safari中表现不同，而在Chrome或Firefox中则不同

我正在开发一个应用程序，用户可以使用KonvaJS为上传的图片选择相框并做出反应。我用KonvaJS在图片周围画框架。在保持图像比例的同时，对帧材质的图像进行缩放以适合帧。（如下图所示）

问题是什么： 画面的左侧和右侧看起来像是图像缩放过大或过小，这只发生在Safari中。我检查了多次缩放图案图像所做的所有计算，但框架在Safari中如下图所示。框架在Chrome和Firefox中的行为正常

我在这里想要实现什么： 固定图案图像的缩放比例，以便在保持图像比例的同时，帧的左侧和右侧将正确匹配

我当前使用的内容：

• 反应konva 16.13.0-6
• Konva 7.1.3
• 桌面：Safari 14.0.1
• 在手机上：Safari 12.4.8

我已经尝试过的：

• 尝试更改为缩放图案图像而进行的计算
• 在多个浏览器上检查帧的所有测量值
• 尝试在外部画布上绘制图像，并在该画布上手动缩放。然后用它来填充图案图像

frameUtils.js：

// flat array of points coordinates [x1, y1, x2, y2, x3, y3]
export const topPoints = (frameWidth, topPadding, sidePadding) => [
    0,
    0,
    frameWidth,
    0,
    frameWidth - sidePadding,
    topPadding,
    sidePadding,
    topPadding,
    0,
    0
];

export const leftPoints = (frameHeight, sidePadding, topPadding, bottomPadding) => [
    0,
    0,
    0,
    frameHeight,
    sidePadding,
    frameHeight - bottomPadding,
    sidePadding,
    topPadding,
    sidePadding,
    topPadding,
    0,
    0,
    0
];

export const bottomPoints = (frameHeight, frameWidth, bottomPadding, sidePadding) => [
    0,
    frameHeight,
    sidePadding,
    frameHeight - bottomPadding,
    frameWidth - sidePadding,
    frameHeight - bottomPadding,
    frameWidth,
    frameHeight,
    0,
    frameHeight
];

export const rightPoints = (frameWidth, frameHeight, sidePadding, topPadding, bottomPadding) => [
    frameWidth,
    0,
    frameWidth,
    frameHeight,
    frameWidth - sidePadding,
    frameHeight - bottomPadding,
    frameWidth - sidePadding,
    topPadding,
    frameWidth,
    0
];

Frame.jsx：

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {Line, Group} from 'react-konva';
import {topPoints, leftPoints, bottomPoints, rightPoints, loadPicture} from "./frameUtils";

const Frame = ({
    frameWidth,
    frameHeight,
    padding,
    frameTexture,
    coordinates = {x: 0, y: 0},
    onChange,
    onClick,
    frameRef,
    scaleX,
    scaleY,
    patternScaleX,
    patternScaleY
}) => {
    const [frameImg, setFrameImg] = useState(null);
    const [loadedFrame, setLoadedFrame] = useState(null);

    useEffect(() => {
        if (frameTexture && frameTexture.image && loadedFrame !== frameTexture.image) {
            setLoadedFrame(frameTexture.image);
            loadPicture(frameTexture.image)
                .then(setFrameImg);
        }

    }, [frameTexture]);

    // flat array of points coordinates [x1, y1, x2, y2, x3, y3]
    const topFrameSide = topPoints(frameWidth, padding, padding);

    const leftFrameSide = leftPoints(frameHeight, padding, padding, padding);

    const bottomFrameSide = bottomPoints(frameHeight, frameWidth, padding, padding);

    const rightFrameSide = rightPoints(frameWidth, frameHeight, padding, padding, padding);

    return (
        <Group x={coordinates.x} y={coordinates.y} onChange={onChange} onClick={onClick} ref={frameRef} scaleX={scaleX} scaleY={scaleY}>
            <Line points={topFrameSide} fillPatternImage={frameImg} fillPatternRepeat={'repeat-x'} fillPatternScale={{x: patternScaleX, y: patternScaleY}} fillPatternRotation={0} closed={true}/>
            <Line points={leftFrameSide} fillPatternImage={frameImg} fillPatternRepeat={'repeat-x'} fillPatternScale={{x: patternScaleX, y: patternScaleY}} fillPatternRotation={270} closed={true}/>
            <Line points={bottomFrameSide} fillPatternImage={frameImg} fillPatternRepeat={'repeat-x'} fillPatternScale={{x: patternScaleX, y: patternScaleY}} fillPatternY={frameHeight} fillPatternRotation={180} closed={true}/>
            <Line points={rightFrameSide} fillPatternImage={frameImg} fillPatternRepeat={'repeat-x'} fillPatternScale={{x: patternScaleX, y: patternScaleY}} fillPatternX={frameWidth} fillPatternRotation={90} closed={true}/>
        </Group>
    )
};

Frame.propTypes = {
    frameWidth: PropTypes.number.isRequired,
    frameHeight: PropTypes.number.isRequired,
    padding: PropTypes.number.isRequired,
    frameTexture: PropTypes.object,
    coordinates: PropTypes.object,
    onChange: PropTypes.func,
    onClick: PropTypes.func,
    frameRef: PropTypes.any,
    scaleX: PropTypes.number,
    scaleY: PropTypes.number,
    patternScaleX: PropTypes.number,
    patternScaleY: PropTypes.number
};

export default Frame;

import React，{useffect，useState}来自“React”；
从“道具类型”导入道具类型；
从'react konva'导入{Line，Group}；
从“/frameUtils”导入{topPoints、leftPoints、bottomPoints、rightPoints、loadPicture}；
常量帧=({
帧宽，
框架高度，
衬垫，
框架结构，
坐标={x:0，y:0}，
一旦改变，
onClick，
frameRef，
scaleX，
斯卡利，
patternScaleX，
patternScaleY
}) => {
const[frameImg，setFrameImg]=useState（null）；
const[loadedFrame，setLoadedFrame]=useState（null）；
useffect（（）=>{
if（frameTexture&&frameTexture.image&&loadedFrame！==frameTexture.image）{
setLoadedFrame（frameTexture.image）；
loadPicture（frameTexture.image）
.然后（设置帧img）；
}
}，[frameTexture]）；
//平面点坐标阵列[x1，y1，x2，y2，x3，y3]
const topFrameSide=顶部点（帧宽度、填充、填充）；
const leftFrameSide=leftPoints（帧高度、填充、填充、填充）；
const bottomFrameSide=底部点（帧高、帧宽、填充、填充）；
const rightFrameSide=righpoints（帧宽、帧高、填充、填充）；
返回(
)
};
Frame.propTypes={
frameWidth:PropTypes.number.isRequired，
帧高度：需要PropTypes.number.isRequired，
填充：需要PropTypes.number.isRequired，
frameTexture:PropTypes.object，
坐标：PropTypes.object，
onChange:PropTypes.func，
onClick:PropTypes.func，
frameRef:PropTypes.any，
scaleX:PropTypes.number，
scaleY:PropTypes.number，
patternScaleX:PropTypes.number，
patternScaleY:PropTypes.number
};
导出默认帧；

我想我可能忽略了一些重要的细节，或者只是做错了什么导致了这个bug。什么会导致这种情况发生

编辑2020年12月15日第1部分：删除了一些不必要的代码行，稍后将添加小演示

---

编辑2020年12月15日第2部分：添加了一个仅包含相关部分代码的小型在线演示。如果在Chrome和Safari中都打开，问题就可以清楚地看到：

你能做一个小型的在线演示吗？您在移动或桌面safari上有问题吗？或者两者都有？我会尽快制作一个小型的在线演示。刚刚用iOS 12.4.8在iPhone 6 safari上进行了测试，我也发现了问题，还有桌面safari iOS 14.0.1。@lavrton我添加了一个小的在线演示，希望有帮助。你能做一个小的在线演示吗？您在移动或桌面safari上有问题吗？或者两者都有？我会尽快制作一个小型的在线演示。刚刚用iOS 12.4.8在iPhone 6 safari上进行了测试，我也发现了问题，还有桌面safari iOS 14.0.1。@lavrton我添加了一个小的在线演示，希望能有所帮助。