Does not work when rendered inside an iframe

Description

Minimal reproduction

import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import RcTooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap.css';

function IframeContent({ container }: { container: HTMLElement }) {
  return createPortal(
    <RcTooltip
      overlay="Hello from tooltip"
      placement="top"
      getTooltipContainer={() => container}
    >
      <button>Hover me</button>
    </RcTooltip>,
    container,
  );
}

export default function App() {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const [mountEl, setMountEl] = useState<HTMLElement | null>(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const onLoad = () => {
      setMountEl(iframe.contentDocument?.body ?? null);
    };

    iframe.addEventListener('load', onLoad);
    if (iframe.contentDocument?.readyState === 'complete') onLoad();

    return () => iframe.removeEventListener('load', onLoad);
  }, []);

  return (
    <>
      <iframe
        ref={iframeRef}
        srcDoc="<!DOCTYPE html><html><body></body></html>"
        style={{ width: '100%', height: 200, border: '1px solid #ccc' }}
      />
      {mountEl && <IframeContent container={mountEl} />}
    </>
  );
}

Expected behavior

@rc-component/trigger should support trigger and popup elements rendered inside iframe documents.

Popup positioning and visible area calculation should work regardless of whether the DOM elements come from the parent document or an iframe document.

Actual behavior

When rendered inside an iframe, popup alignment/visible area calculation can be incorrect because iframe <body> and <html> elements fail the instanceof HTMLBodyElement / instanceof HTMLHtmlElement checks.

Par où commencer

Lisez l'issue en entier, puis le guide de contribution du projet.

Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.

Forkez le dépôt et travaillez sur une branche.

Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par localiser le code de positionnement du trigger et du popup qui vérifie HTMLBodyElement et HTMLHtmlElement avec instanceof. Reproduisez l’exemple d’iframe en TypeScript fourni et examinez la manière dont le calcul de la zone visible gère les éléments provenant d’un autre document. Le travail est terminé lorsque l’alignement du trigger et du popup fonctionne correctement aussi bien dans les documents iframe que dans le document parent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique

react, typescript

Domaine

frontend

Type d'issue

Bug

Difficulté

3/5

Temps estimé

1-2 jours

Activité

Calme

Clarté

Plutôt claire

Accessibilité débutants

58/100