fix: 适配获取shadowDom中html的clientHeight #589
Open
+15
−8
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
npm run test
通过详细描述
通过
clientHeight
获取元素高度有个特例:对于
html
节点,会拿到窗口高度(viewport height):https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight但在
shadowDom
中,子应用html
的clientHeight
拿到的是html
节点高度。非降级模式下,子应用弹窗可以溢出到全局,但当子应用内的悬浮提示定位依赖这个属性时,就会导致定位不准确。
(我这边出问题的场景是,子应用的弹窗内,表单校验提示的悬浮气泡定位不准)
排查发现是气泡的定位代码依赖了
jQuery
获取window
高度的写法:jQuery
对应的内部实现为:拿到了
html
的高度从而导致气泡错位。此PR针对该场景,处理了
shadowDom
内html
的clientHeight
属性,使其拿到外层html
的clientHeight
。对于嵌套场景,会继续传递,拿到最外层的
html
的clientHeight
。对于降级场景,因弹窗不会溢出到全局,故无需处理。