Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SubMenu 水平模式 在IE 浏览器下面 不弹出二级菜单 #444

Open
ikonan opened this issue Apr 1, 2022 · 17 comments
Open

SubMenu 水平模式 在IE 浏览器下面 不弹出二级菜单 #444

ikonan opened this issue Apr 1, 2022 · 17 comments

Comments

@ikonan
Copy link

ikonan commented Apr 1, 2022

SubMenu 水平模式 在IE 浏览器下面 不弹出二级菜单,只有第一个菜单有二级菜单能够正确弹出,后面其他菜单有二级菜单的情况都不会弹出, 我多次测试后发现在8.x 版本水平模式在IE 都能正确的弹出二级菜单,一旦升级到9.x 版本就不能正确兼容IE。

image

@jonirrings
Copy link

same problem here.
我也遇到了……从antd 4.11升级到4.20

@ikonan
Copy link
Author

ikonan commented May 5, 2022

@yiminghe 大神帮忙看哈这个兼容性问题撒

@afc163
Copy link
Member

afc163 commented May 5, 2022

有啥报错么?

@afc163
Copy link
Member

afc163 commented May 5, 2022

@ikonan
Copy link
Author

ikonan commented May 6, 2022

@afc163
应该不是 includes polyfill 的问题,在IE浏览器下面第一个二级菜单是能够正常显示的, 但是后面的二级菜单都不能正常显示。 onOpenChange 这个方法也不会执行。
image

@ikonan
Copy link
Author

ikonan commented May 6, 2022

image
@yiminghe

@afc163
Copy link
Member

afc163 commented May 8, 2022

来个 PR 吧

@jonirrings
Copy link

原因可能跟rc-overflow相关,在ie11下,rc-overflow的base案例,渲染和chromium内核/firefox不一致。
debug中,争取这两天一个PR

@jonirrings
Copy link

表面原因是:overflow非第0项,display被设置为false,https://github.com/react-component/overflow/blob/v1.2.5/src/Overflow.tsx#L316 ,rest项的高度被设置为了0

  1. 然后布局占用为 0,IE11下没触发ResizeObserver的onResize
  2. 没触发Overflow的registerOverflowSize
  3. restWidth始终为 0
  4. mergedRestWidth始终为 0
  5. useLayoutEffect内的流程判断不需要进入
  6. displayCount得不到更新,始终为 0
  7. 绕回原点,mergedDisplayCount始终为 0
  8. 状态无变更,不进行后续刷新,于是第0项之后的内容,处于隐藏状态。

目前绕过的方法是将上述流程打断。
譬如将Item的useEffect

  React.useEffect(
    () => () => {
      internalRegisterSize(null);
    },
    [],
  );

改成

React.useEffect(
     () => {
      internalRegisterSize(1);
    },
    [],
  )

又或者将prevRestWidth初始值改为1

深层的原因应该是跟ResizeObserver相关,正确的修复应该是保证ResizeObserver在ie11上的行为。
我继续找找正确的修复方法。

@afc163
Copy link
Member

afc163 commented May 10, 2022

正确的修复应该是保证ResizeObserver在ie11上的行为。

+1

@jonirrings
Copy link

jonirrings commented May 11, 2022

根据spec,目前确定为是polyfill的bug

Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.

将rc-resize-observer的bug验证代码微微修改一下,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ResizeObserver IE11 bug</title>
    <style>
        .hidden {
            height: 0;
            overflow: hidden;
        }
    </style>
    <script src="dist/ResizeObserver.global.js"></script>
</head>
<body>
<div id="parent">
    <div class="hidden">label 1</div>
    <div class="hidden">label 2</div>
    <div class="hidden">label 3</div>
</div>
<script>
    function pResize() {
        console.log('resize in Parent');
    }

    function cResize(entries) {
        var i;
        for (i = 0; i < entries.length; i++) {
            console.log('resize in Child', entries[i].target.innerText);
        }
    }

    var p = document.querySelector('#parent');
    var children = document.querySelectorAll('.hidden');
    var obp = new ResizeObserver(pResize);
    var obc = new ResizeObserver(cResize);
    obp.observe(p);
    var i, el;
    for (i = 0; i < children.length; i++) {
        el = children[i];
        obc.observe(el);
    }
</script>
</body>
</html>

继续往下挖,resize-observer-polyfill的实现,在IE11上使用的是mutation observer,
这该咋整……patch ie11的MutationObserver实现么?

@jonirrings
Copy link

emmm……现在挖出来是,height: 0; overflow: hidden;,在ie11下,clientWidth为0,与chromium不一致。

@jonirrings
Copy link

已给上游提交quick fix

等待合并,或者正式的修复……

@jonirrings
Copy link

等上游估计是遥遥无期了,用webpack.NormalModuleReplacementPlugin先凑合本地解决了。

@SmileLifeIven
Copy link

等上游估计是遥遥无期了,用webpack.NormalModuleReplacementPlugin先凑合本地解决了。

可以给个示例吗?感谢

@jonirrings
Copy link

@SmileLifeIven
在webpack config的plugins中,增加一项

new webpack.NormalModuleReplacementPlugin(
      /^resize-observer-polyfill$/,
      resolvePath('tools', 'lib', 'resize-observer-polyfill'),
    ),

其中tools\lib\resize-observer-polyfill是我这边存放改写后的resize-observer-polyfill的路径

@SmileLifeIven
Copy link

@SmileLifeIven 在webpack config的plugins中,增加一项

new webpack.NormalModuleReplacementPlugin(
      /^resize-observer-polyfill$/,
      resolvePath('tools', 'lib', 'resize-observer-polyfill'),
    ),

其中tools\lib\resize-observer-polyfill是我这边存放改写后的resize-observer-polyfill的路径

感谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants