Хром не обновляет transform-origin - PullRequest
Новая
       14

Хром не обновляет transform-origin

1 голос
/ 16 июня 2019

При использовании React для рендеринга счетчика в браузерах на основе Chromium свойство transform-origin обновляется только после одного из следующих действий:

  • Размер области просмотра изменяется
  • Я используюмоя мышь, чтобы парить где-нибудь внутри инструментов разработчика

Спиннер построен с использованием styled-components с помощником keyframes, но, поскольку он работает в Safari и Firefox, я не уверен, что этоРеагируйте на проблему в конце концов.

См. Следующий GIF (извинения за качество картофеля):

Sorry for potato quality

Все другие браузеры производятожидаемый результат немедленно.Это известная ошибка 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>
);

1 Ответ

1 голос
/ 26 июня 2019

Без какого-либо примера кода, демонстрирующего вашу проблему, трудно понять, решаю ли я вашу настоящую проблему или нет, но мне удалось попасть в аналогичную ситуацию.

На этой скрипке , которая приблизительно воспроизводит вашу анимацию, источник трансформации изменяется на центр, когда мышь наводит курсор на тело, однако в некоторых браузерах (могут подтвердить текущие Chrome и Chromium 75) значение выиграло ' t обновлять во время работы анимации, если, как вы упомянули, элемент не будет проверен.

Возможный трюк, который я нашел, - сбросить анимацию. Вы можете сделать это, продублировав объявление ключевых кадров и переключившись на альтернативное при изменении источника преобразования: 

@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;
}

Вот скрипка , показывающая трюк.

Если вы не хотите дублировать свои ключевые кадры, я полагаю, что вы также можете использовать 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 = '';
...