Flowchart htmlLabels 不包在分数设备上 PixelRatio: 精确等分box上. 宽度 QQ 宽度脆弱

说明

在 " addHtmlSpan " ( " packages/mermaid/src/resting-util/createText.ts " )中,HTML标签包是否由测量宽度和包装宽度的精确-平等浮标比较决定:

div.style('display','table-cell'); 2. div. style("白-空格","无包装") ; div.style("行-高","1.5"); 如果(width !====================================================================================================================================================================================================================================== (================== div.style('max-width',宽度+'px'); 2. div.style("文本对齐","中心"); {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 让 bbox = div.node ()!. get BoundingClient Rest () ; 如果 (bbox.width QQ宽度) { / / <- 脆弱的精确浮点平等 div. style(“ 播放” , “表” ); div. style("白-空","破-空") ; div.style("width",宽度+"px"); bbox = div.node ()!. get BoundingClient Rest (); ; 存档副本. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

`GetBoundingClientrect (.width)' 是一个子像素浮点。 当“最大宽度:<width>px' 夹接时,返回的宽度在整数设备-像素网格(devicePixelRatio = 1)上铺出页面时,则比特精确地表示整数`width'。 在以**折射缩放/某些HiDPI配置**显示时,被夹住的宽度会回落到`200.0078125',因此`bbox.width QQ宽度'是**false**,包接分支被跳过,标签会保留'white-space:nowrap',而长标签会溢出节点而不是包接.

QQ浏览器特有:Chrome/Blink 只-Safari没事

在相同机器上 和同一平分大小的 HIPI 显示器上 **:

- ** Safari(WebKit):使标签包装正确。 ** 没问题
- **Chrome/Blink:标签留在一行并溢出节点。 **

因此这不是一个一般的布局问题——这是Chrome/Blink的子像素'GetBoundingClientReft ()' 在分数显示下进行四舍五入,在整数"width"上缩放出一发. Firefox和任何设备PixelRatio = 1的设置也打包正确,这正是错误容易被错过的原因:同一个Chrome包装的同一种美人鱼版本和另一个机器的外溢,完全是因为显示缩放.

环境

- 美人鱼 11.15.0( " 发展 " 逻辑不变)。
- Google Chrome 148, macOS (Apple Silicon, M4), 缩放 HiDPI 显示.
- 注:无头铬通过CDP`Emulation.setDevicesMetrics Override'(在1、1.25、1.5、1.75、2、2.25、2.5测试时测试的仪器)将测量钉住到*准确的*整数宽度并**不**复制。 因此,即使严格的平等逻辑显然脆弱,标准的CI/无头设置可能不会露出这一点。

* 复制步骤

在Chrome运行在平分大小的 HIPI 显示上, 使一个“ html标签: 真实的” 流程图节点, 其纯文本标签( 无 QQbr/ , 无回缩标记下字符串) 比“ 流程图. wrappingWidth ” 宽 :

流程图 TD a["一个刻意长长的单行节点标签,而没有任何超过包宽的bR标记"].

标签在一行上并溢出节点框。 DOM探测器: " div " 的标签有 " 白色 -- -- 空间:现成 " ,其 " 外物体 " 大约为 " Width " 宽,但只有一行高。

- 说吧
. . . . . . .