在 Safari 中动态更新 SVG 文本属性时的重绘问题

问题描述

我正在开发一个应用程序,它可以动态更新 SVG 中文本元素的内容、字体和大小。这在大多数浏览器中都可以正常工作,但我在 Safari 中遇到了一些奇怪的重绘问题(也在他们的技术预览中)。

当 Safari 重绘文本时,似乎会留下未正确删除的像素轨迹。左边的像素是旧字体的残余。这似乎主要发生在新字体比旧字体小时。调整窗口大小、在窗口上失去焦点、聚焦输入等可以纠正问题,直到再次更改字体

First rendered font

After changing the font dynamically

我创建了一个 CodePen 来演示这个问题:https://codepen.io/frankderouge/pen/LYRvKXM?editors=1010

有多种方法可以解决此问题。第一种是在文本上放置一个宽度和高度为 100% 的透明矩形,然后在对文本进行调整后更改矩形的可见性。这会迫使 Safari 重新绘制整个内容。第二种解决方法是隐藏然后再次显示文本,同时强制完全重绘。

有些事情我也尝试过,但不起作用:

  • 使用 text-rendering CSS 属性设置文本渲染方法
  • 设置 will-change CSS 属性
  • 强制使用硬件加速(-webkit-transform: translate3d(0,0)呈现文本;
  • 通过请求文本尺寸(getBBoxgetComputedTextLength)强制重绘
  • 将文本包裹在一个组中并应用该组的属性

如果可能,我宁愿避免使用变通方法。我想知道是否有其他人遇到过这个问题并且可能找到了更好的解决方案?

提前致谢!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...