IOS 网络浏览器，“will-change”导致渲染问题

如何解决IOS 网络浏览器，“will-change”导致渲染问题

Css 属性“will-change”使动画性能更好。但似乎它会在特殊情况下禁用 IOS 移动浏览器中的某些渲染。

以下代码在IOS手机浏览器中的行为：

点击“点击我”，将计数添加到length；
使用新的 length 渲染组件；
“值”显示错误length，“相同值”显示正确length。

“值”和“相同值”之间的区别是css代码，我想也许“will-change”会触发IOS移动浏览器优化渲染html。 “value”中正确的 length 已优化。

所以请有人解释这个奇怪的问题。谢谢。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [length,setLength] = useState(0);

  const onClick = () => setLength(length + 1);

  const list = Array.from({ length }).fill("");
  const items = list.map(() => {
    return <div className="item">placeholder</div>;
  });

  return (
    <div className="container">
      { /* has css "will-change" */ }
      <div className="create" onClick={onClick}>
        Click me
      </div>
      {items}
      { /* has css "position: relative","Box-shadow" */ }
      <div className="length"> value: {length}</div>
      <div> same value: {length} </div>
    </div>
  );
}

.length {
  position: relative;
  Box-shadow: 0 0 5px red;
}

.create {
  will-change: transform;
}

.container {
  font-size: 28px;
}

Bug Demo,open with iphone browser

Bug video,if don't have iphone

Source code

解决方法

希望我能在这里提供一些帮助：

首先，你说

Css 属性“will-change”使动画性能更好。

这不是真的，引用自 MDN：

“will-change 被用作最后的手段，以尝试处理现有的性能问题。它不应该用于预测性能问题。”

“谨慎使用。浏览器进行优化的正常行为是尽快删除优化并恢复正常。但是直接在样式表中添加 will-change 意味着目标元素总是少数片刻之后，浏览器将保持优化的时间比其他方式长得多。”

摘要中缺少的一个非常重要的部分是在“更改完成后删除将更改”下方。

另外，请记住 will-change 成本内存和浏览器将需要大约。 200 毫秒应用优化。

脚本运行良好，如果你

移除相对位置
去除意志改变
点击后放大，数值更新。
向您的组件添加密钥将强制其更新 <div key={length} className="length"> value: {length}</div>

您可以查看此内容以获取有关将如何更改的更多信息。

How to use and how works CSS' will-change property?