铬未更新转换来源

Question

在基于Chromium的浏览器中使用React渲染微调器时，transform-origin属性仅在以下任一情况下更新：

• 调整视口大小
• 我用鼠标悬停在开发人员工具内的任何地方

微调器是使用styled-components和keyframes帮助器构建的，但由于它可以在Safari和Firefox中使用，所以我不太确定这毕竟是一个React问题。

请参阅以下GIF（为马铃薯质量道歉）：

所有其他浏览器都会立即产生预期的结果。这是已知的Chromium错误吗？我在这里想念东西吗？

编辑：

这是Spinner元素。这是从应用程序的入口点呈现的唯一内容。

import React from "react";
import styled, { keyframes } from "styled-components";
import { COLOR_PRIMARY } from "core/constants";

const SpinnerWrapper = styled.div`
    display: inline-block;
    position: relative;
    width: ${props => props.size || "2rem"};
    height: ${props => props.size || "2rem"};
    pointer-events: none;
`;

const spinnerAnimation = keyframes`
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
`;

const SpinnerItem = styled.div`
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    margin: 6px;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: ${spinnerAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: ${props => props.inverse ? "white" : COLOR_PRIMARY} transparent transparent transparent;
    animation-delay: ${props => props.delay || "0"}s;
    transform-origin: 50% 50% !important;
`;

export default ({ size, inverse }) => (
    <SpinnerWrapper size={size}>
        <SpinnerItem inverse={inverse} delay={-.45} />
        <SpinnerItem inverse={inverse} delay={-.3} />
        <SpinnerItem inverse={inverse} delay={-.15} />
    </SpinnerWrapper>
);

Answer 1

没有一些示例代码来演示您的问题，很难知道我是否正在解决您的实际问题，但是我设法遇到了类似情况。

在this fiddle上可以大致重现您的动画，当鼠标悬停在身体​​上时，变换原点会更改为居中，但是在某些浏览器（可以确认当前的Chrome和Chromium 75）上，该值不会更新除非您提到过，否则动画一直在运行。

我发现一个可能的技巧是重置动画。您可以通过复制关键帧声明并在更改变换原点时切换到备用声明来实现：

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(1turn); }
}
@keyframes spin2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(1turn); }
}
.part {
    transform-origin: 0 0;
    animation: spin 1.5s ease infinite;
}
body:hover .part {
    transform-origin: center;
    animation-name: spin2;
}

这是a fiddle上的把戏。

如果您不想复制关键帧，我相信您也可以使用JS删除动画，强制重排然后重新添加。示例：

// Removes the animation
myElement.style.animation = 'none';
// Forces a reflow - the browser will register that the animation was removed
myElement.clientWidth;
// Adds the animation back (resets it to what is defined in the CSS)
myElement.style.animation = '';