CSS波纹效果与伪元素导致回流

Question

我正在尝试使用样式组件创建材质波纹效果(无法导入材质web组件混合(。我想坚持使用after元素作为前景效果，以保持可访问性树的完整性。

然而，最值得注意的是，在移动设备上，波纹过渡会导致按钮内容回流。这似乎是因为显示的变化(从无到块(，但我已经尝试了一些不共享此工件的替代方案，这种副作用仍然存在。

这是我的代码(我正在使用一些道具来设置波纹，但如果你想复制，你可以硬设置它们(：[这是一个过时的代码版本]

感谢您的关注。

编辑：只有当我在按钮上添加悬停效果时，这个错误才会发生，非常奇怪。下面是链接和代码示例(不幸的是，您必须设置一个react存储库才能复制它(

https://github.com/Eduardogbg/ripple-hover-reflow-bug

import React, { useRef, useReducer } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components'
const ButtonBase = styled.button`
cursor: pointer;
width: 250px;
height: 6vh;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
position: relative;
overflow: hidden;
border-width: 0;
background-color: cyan;
:hover {
filter: brightness(1.06);
}
::after {
content: '';
pointer-events: none;

width: ${({ ripple }) => ripple.size}px;
height: ${({ ripple }) => ripple.size}px;
display: none;
position: absolute;
left: ${({ ripple }) => ripple.x}px;
top: ${({ ripple }) => ripple.y}px;
border-radius: 50%;
background-color: ${({ ripple }) => ripple.color};
opacity: 0;
animation: ripple ${({ ripple }) => ripple.duration}ms;
}
:focus:not(:active)::after {
display: block;
}

@keyframes ripple {
from {
opacity: 0.75;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(2);
}
}
`
const rippleReducer = ref => (ripple, event) => {
const { x, y, width, height } = ref.current.getBoundingClientRect()
const size = Math.max(width, height) 

return {
...ripple,
size, 
x: event.pageX - x - size / 2,
y: event.pageY - y - size / 2
}
}
const DEFAULT_RIPPLE = {
size: 0,
x: 0,
y: 0,
color: 'white',
duration: 850
}
const Button = props => {
const ref = useRef(null)
const [ripple, dispatch] = useReducer(
rippleReducer(ref),
{ ...DEFAULT_RIPPLE, ...props.ripple }
)
return (
<ButtonBase
ref={ref}
className={props.className}
ripple={ripple}
onClick={event => {
event.persist()
dispatch(event)
}}
>
{props.children}
</ButtonBase>
)
}
ReactDOM.render(
<div style={{
backgroundColor: 'red',
width: '500px', height: '500px',
display: 'grid',
placeItems: 'center'
}}>
<Button>
<span style={{ fontSize: '30px' }}>
abacabadabaca
</span>
</Button>
</div>,
document.getElementById('root')
);

Answer 1

这个问题似乎与几年前被认为已经解决的铬错误有关：在铬中更改过滤器时，图像在悬停时移动

设置transform: translate3d(0,0,0);看起来像是一个修复，尽管我的眼睛不是像素完美的。