yiminghe / dom-align Goto Github PK

css-vendor will call window.getComputedStyle without checking if it is defined. The latest version import css-vender make rc-align crash in IE8

Hello,i am working on an project with [email protected], which has indirect dependency on [email protected]. It will broken on IE8 because of window.getComptedStyle in [email protected] .
Why not set a 2.x version, so it would be safer for Dependents .

Thanks a lot for the excellent work.

为什么对页面进行镜像操作后，body上加ttransform: scaleX(-1);，dom-aligin的定位就不准确了

https://github.com/yiminghe/dom-align/blob/master/src/utils.js#L203-L210

导致bug的原因是 在设置位置的时候 改变两次css属性，使得 getOffset(elem) 获取的值是css变幻过程中的一个值 导致计算有问题， 能否通过单纯的计算获取位置，中间不要改变css的值

transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s;

It occurred in using rc-color-picker accidently.
Error tracker positioned the error source code:
He.prototype.__iterate = function(e, t) { var n = this , r = 0; return this._root && this._root.iterate((function(t) { return r++, e(t[1], t[0], n) } ), t), r }
Need Help.

add && 'name' judgment

//   /dom-align/src/utils.js

function _getComputedStyle(elem, name, cs) {
  var computedStyle = cs;
  var val = '';
  var d = getDocument(elem);
  computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null); // https://github.com/kissyteam/kissy/issues/61

  if (computedStyle && name) {
    val = computedStyle.getPropertyValue(name) || computedStyle[name];
  }

  return val;
}

页面底部有一定区域增加了fixed布局的浮层
使用rc-dropdown、rc-trigger等引用dom-align调整弹框对齐位置的组件时，会出现下拉浮层被fixed层遮挡
希望可以通过某些参数支持alwaysByViewport + offset来调整overflow的判断

即希望可以支持设置距离可视窗口一定距离时，做overflow判断，以调整弹出菜单的位置

ie8下有兼容性问题：
https://caniuse.com/#search=getBoundingClientRect
The returned object lacks width and height properties.

前置条件:

dom 结构如下图

实际结果：

sourceNode 获取到的 offsetParent 是 上图中 ”position:fixed“ 的元素，这样的话，就直接跳过了 ”overflow:auto“ 的元素参与 可视区域计算的过程，又因为 ”position:fixed“ 的元素 的overflow 属性 为 "visible" ，他之上的元素一直到 body都是 ”visible“ 属性，导致最终的可视区域 就变为了 body

预期结果：

I'm unit testing a component of mine that uses antd dropdown.
I get this error when trying to use enzyme to mount the component and then simulate a click on that drop down.

The above error occurred in the <Align> component:
    in Align (created by Popup)
    in AnimateChild (created by Animate)
    in Animate (created by Popup)
    in div (created by Popup)
    in Popup (created by Trigger)
    in Portal (created by Trigger)
    in Trigger (created by Dropdown)
    in Dropdown (created by Dropdown)
 TypeError: getComputedStyleX is not a function
          at getWH (node_modules/dom-align/lib/utils.js:434:23)
          at HTMLAnchorElement.<anonymous> (node_modules/dom-align/lib/utils.js:486:19)
          at swap (node_modules/dom-align/lib/utils.js:359:12)
          at getWHIgnoreDisplay (node_modules/dom-align/lib/utils.js:485:5)
          at Object.domUtils.(anonymous function) [as outerWidth] (node_modules/dom- 
   align/lib/utils.js:495:18)
          at getRegion (node_modules/dom-align/lib/getRegion.js:19:28)
          at alignElement (node_modules/dom-align/lib/align/alignElement.js:34:50)
          at Align._this.forceAlign (node_modules/rc-align/lib/Align.js:76:47)
          at Align.componentDidMount (node_modules/rc-align/lib/Align.js:91:10)
         at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:14362:22)

I definitely do have a window defined.

        console.log(".....", window.getComputedStyle);
        let wrapper = mount(<UserMenu />);
        wrapper.find(Dropdown).simulate('click')

See demo here:

http://requirebin.com/?gist=1406e9992ca56949d224903c2f87c11a

My understanding of setting overflow: {adjustX: true} is that if the source is positioned offscreen it should be adjusted back onto the screen

As seen in the provided example this does not seem to be happening.

It seems like this was a regression caused by this commit: aaac734 . Specifically

newOverflowCfg.adjustX = overflow.adjustX &&
      isFailX(elFuturePos, elRegion, realXRegion);

Should be

newOverflowCfg.adjustX = overflow.adjustX &&
      isFailX(elFuturePos, elRegion, visibleRect);

如果把元素粘贴在底部

position: sticky;
bottom: 0;

在未拖动到底部时的效果和 fixed 类似，但是库是按照正常文档流来处理的，导致在向下滚动的时候 Popup 一直不可见

Codepen 重现 Demo

代码：https://github.com/MrErHu/dom-align-bugfix-demo（url: http://localhost:3000/bugfix）
原始状态如下：

source node:

• width: 100
• height: 40:
• marginTop: 30

taget node:

• width: 100
• height: 40
• left: 0
• right: 0

当配置：

{
    points: ['bc', 'tc'],
    offset: [0, -10],
    targetOffset: [0, 0],
    overflow: {
        adjustX: true,
        adjustY: true,
    }
}

理论上Y轴无法显示，source node的points应该改变为 ['tc', 'bc']`，对应的offset: [0, 10]。
但是实际情况是：

• 期望：
  页面zoom放大时，Source元素能正确计算定位的left, top

• 演示地址：here

This is a follow up of an old issue I reported, but essentially it would be cool if we could have a way to prevent the source to touch the viewport edges.

I found this issue while working with some fixed elements that have overflow styles in the parent. Is this expected? I would think that the adjust feature would pull the element back into the viewport.

Bug Example: https://codesandbox.io/s/dom-align-bug-scymr

Expected Result: Clicking on button would auto adjust dropdown to be within the window.

Actual Result: Dropdown element flows off of page, adding a scroll in the x direction.

chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=672457

https://jsfiddle.net/haLz537b/

dom-align: 1.6.6

弹出面板中是一个input框，弹出后键入一个值,input的焦点会丢失。

最终ie8下会出现如下现象：

期望：能和Feature描述中的一致

http://yiminghe.me/dom-align/examples/fail.html
demo效果对应配置应该是 points: ['tl', 'tl']? 而不是points: ['bl', 'bl']

使用最新的SiderMenu后出现这个问题, 源码例子测试没有这个问题, 所以不知道怎么处理, 请教一下!
Menu Collapsed 之后二级菜单没有变成弹出框, 而是保持原来的下拉框, 是什么情况呢

In IE11, If activeElement is a svg element, call focus() method cause error.

Internet Explorer Version: 11.0.9600.18893IS

demo

<body>
  <svg>
  <circle id="mycircle"  cx="400" cy="300" r="50" />
<svg>
</body>

场景，table 列表 里的 行 鼠标滑过弹窗对齐

getElFuturePos.js:4 Uncaught TypeError: Cannot read property '1' of undefined.

修复 可视区域的计算，应该被 documentElement 的 clientWidth/clientHeight 裁剪，否则，弹框将显示到出可视范围外去(如下图)

前置条件： 图片中的滚动条为 window 的滚动条，其他容器的 overflow 均为 visible

实际结果：

预期结果：

After the 1.8.1 update our tests which use jsdom fail with the error:

ReferenceError: getComputedStyle is not defined
    at getVisibleRectForElement (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/getVisibleRectForElement.js:83:19)
    at isOutOfVisibleRect (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/align/alignElement.js:26:63)
    at alignElement (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/align/alignElement.js:36:34)
    at Align._this.forceAlign (/home/developer/workspace/main/pvc-core/webui/node_modules/rc-align/lib/Align.js:88:47)
    at Align.componentDidMount (/home/developer/workspace/main/pvc-core/webui/node_modules/rc-align/lib/Align.js:107:12)
    at /home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:262:25
    at measureLifeCyclePerf (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:73:12)
    at /home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:261:11
    at CallbackQueue.notifyAll (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/CallbackQueue.js:74:22)
    at ReactReconcileTransaction.close (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactReconcileTransaction.js:78:26)

Is their a workaround for this?

I am using the antd library for my UI (located within a shadow dom in an Google Chrome Extension) and have been experiencing issues when using the Popover component. I've traced the error back to the use of this library when trying to work with document fragments, which breaks the flow.

Any advice on this?

We are seeing an error in this line of code in our error tracking:

The stack trace indicates it's coming from rc-align usage:

Looks it might be fixable with safe property access within this library, but not sure exactly what's going on. Any help appreciated. Thanks!

您好，我的问题是，如果dom-align后对target node进行了调整，在外面怎么才能确定确实经过了adjust呢？目前domAlign方法的返回值里有point、offset和targetoffset，我想的是可以根据这几个值是否经过flipOffset处理过来判断是否经过了adjust，但这样的方式感觉不够直观，请问是否有其他方式来进行这种判断呢？
或者把fail也返回？

I agree the source node is good to have an initial "left/top" set (i.e "-9999px"), to shown out of screen before we calculated the actual position. However, not all developers doing good things.

Debugging into the source, the issue happens in utils.setOffset, current is always 0 if the initial "left/top" are not set.

...
for (key in offset) {
  current = parseFloat(css(elem, key)) || 0;
  ret[key] = current + offset[key] - old[key];
}
...

BTW, I'm from China, to keep consistent with your repo style, I'm using English instead. And this tool is cool 😋

I'm showing a tooltip with an arrow and would like to change the arrow location based on whether there was a flip or not. Is this possible in the current library?