在Chrome上使用带有分页功能的Popover时，在从一个信息分页到另一个信息时，有时整个页面都会“跳转”

问题描述

我正在使用Antd库进行React。我有一个功能，可以使用 Popover 显示有关某人的评论。我还在 Popover 分页组件中使用它，它从一个注释变为另一个。

注释可能只有一行或多行，迫使 Popover 对于每个“页面”都具有不同的高度。

在Firefox上一切正常，但是在Chrome上，当我在注释之间进行分页并打开 Popover 时，有时整个页面都会“跳转”，这很可能是因为 Popover 获得新的高度。

我想知道这是否是错误，或者这是解决此问题的一种方法。

谢谢。

---

简而言之，这是组件：

<Popover
        destroyTooltipOnHide={true}
        ref={popupRef}
        mouseLeaveDelay={0.5}
        onVisibleChange={this.onVisibleChanged}
        content={
          isEmpty ? (
            <p>There are no comments to show</p>
          ) : (
            <div className="comments-popover-body">
              <Comment
                key={comment._id}
                author={comment.userName}
                datetime={moment(comment.created_at).format('LLL')}
                content={
                  <Paragraph
                    ellipsis={{
                      rows: 6,expandable: true,onExpand: this.refreshPopupPosition
                    }}
                  >
                    {comment.comment}
                  </Paragraph>
                }
              />
              <Row>
                <Col span={12} style={{ textAlign: 'left' }}>
                  {showFilters ? (
                    <RadioGroup defaultValue={false} size="small" onChange={this.toggleFilter}>
                      <RadioButton value={false} checked={!filter}>
                        All comments
                      </RadioButton>
                      <RadioButton value={true} checked={filter}>
                        Jedi Comments only
                      </RadioButton>
                    </RadioGroup>
                  ) : null}
                </Col>
                <Col span={12} style={{ textAlign: 'left' }}>
                  {isOne ? null : (
                    <Pagination
                      simple
                      current={currentIndex + 1}
                      total={comments.length}
                      pageSize={1}
                      onChange={this.changeIndex}
                    />
                  )}
                </Col>
              </Row>
            </div>
          )
        }
      >
        {record.lastCommentDateShort}
      </Popover>

解决方法

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

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

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