0

I have created React.Portal with some inline styles, which are not rendered at all in Internet Explorer.

This is my component.

  const {
    x, y, height, width,
  } = popupAnchorRef.getBoundingClientRect();

  return ReactDOM.createPortal(
    <div
      ref={popupRef}
    >
      <div
        role="presentation"
        className={popupAnchorStyle}
        style={{
          left: x,
          top: topPositionAnchor,
        }}
      />
      <div
        className={popupStyle}
        style={styleForPopupPosition}
      >
        <PopupContents alias={alias} handleClosePopup={handleClosePopup} />
      </div>
    </div>
    ,
    document.body,
  );
};

And I have this meta in html <meta http-equiv="X-UA-Compatible" content="IE=edge">

Note: Inline Styles are working on any other component.

AlexZvl
  • 2,092
  • 4
  • 18
  • 32

1 Answers1

1

Okay so the issue was in getBoundingClientRect

  const {
    x, y, height, width,
  } = popupAnchorRef.getBoundingClientRect();

Internet explorer does not have x, and y property, they have left and top

Please see: MDN getBoundingClientRect() docs

Where the figure showing the viewport says x / left, which means x OR left, and y / top, which means y OR top.

hoohoo-b
  • 1,141
  • 11
  • 12
AlexZvl
  • 2,092
  • 4
  • 18
  • 32
  • Thanks for posting the solution for this issue. I suggest you to try to mark your own answer as an accepted answer for this question after 48 hrs, when it is available to mark. It can help other community members in future in similar kind of issues. Thanks for your understanding. – Deepak-MSFT Mar 28 '19 at 03:03