getBoundingClientRect zum Erkennen der Sichtbarkeit

Question

Hintergrund: Ich arbeite derzeit an einem Projekt, in dem meine JS-App in mehrere andere (übergeordnete) JS-Anwendungen eingebettet ist. Einige Eltern-Apps können meine App anzeigen/verbergen, indem sie display: block/none auf ein Element setzen, das meine App enthält. Andere übergeordnete Apps entfernen vorübergehend meine App aus dem DOM und verbinden sie später wieder. Wenige Eltern-Apps verwenden Shadow-DOM, daher habe ich keinen Zugriff auf die Elemente in der Eltern-App.

Ich brauche eine Möglichkeit, um zu überprüfen, ob meine App sichtbar ist (innerhalb DOM und angezeigt; nicht Sichtbarkeit: versteckt und muss nicht im Ansichtsfenster sein), ohne die Eltern-Apps zu ändern, also schaute ich in getBoundingClientRect.

Frage: Zumindest auf Chrom, getBoundingClientRect Returns (w: 0, h: 0, l: 0, t: 0), wenn ein Element oder dessen Vorfahre hat Anzeige: keine oder wenn es entfernt wird, von DOM. Ich konnte keine Dokumentation über die Garantie dieses Verhaltens finden, und ich frage mich, ob es sicher ist (in dem Sinne, dass sich diese Logik nicht ändert), getBoundingClientRect zu verwenden, um nach der Sichtbarkeit eines Elements zu suchen.

Auch ich muss wissen, ob dieses Verhalten in allen gängigen Browsern, einschließlich FF, IE8 + und Safari, konsistent ist. Ist das irgendwo dokumentiert?

Schließlich, warum (0,0,0,0)? Ich fühle mich wie getBoundingClientRect sollte Null in solchen Fällen wie (0,0,0,0) eigentlich etwas anderes bedeutet. Gibt es einen guten Grund dafür?

---

Edited/zusätzliche Frage: Dank ISTOS für den Hinweis auf, dass null Rückkehr einige ahnungslosen Code brechen kann, wie zum Beispiel:

console.log(clientRectObject.height); 
// TypeError: Cannot read property 'height' of null 

nicht über das aktuelle Verhalten zu beschweren, sondern als Designfrage: Anstelle von null kann die Rückgabe einiger ungültiger Rect-Werte (z. B. negative Breite und Höhe) eine sinnvollere Alternative sein?

Answer 1

Zuerst würde ich untersuchen, wie beliebte Bibliotheken wie jQuery ein ähnliches Problem lösen. Hier sind einige Links zu jQuery Quelle:

• https://github.com/jquery/jquery/blob/master/src/css/var/isHidden.js
• https://github.com/jquery/jquery/blob/master/external/sizzle/dist/sizzle.js#L715
• https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

Des weiteren würde ich online nach Hinweisen einschließlich MDN suchen:

• https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
• http://www.nczonline.net/blog/2008/02/04/getting-element-dimensions-a-follow-up
• http://ejohn.org/blog/getboundingclientrect-is-awesome
• http://www.quirksmode.org/blog/archives/2008/02/the_cssom_view.html#link5

Leider ist der beste Weg, um zu überprüfen, ob das Verhalten von getBoundingClientRect das gleiche in den meisten Browsern ist tatsächlich innerhalb dieses Browser zu testen. Wenn Sie dies tun, gehen Sie bitte zurück zu MDN und fügen Sie Ihre Ergebnisse hinzu.

---

mich wie getBoundingClientRect fühlen sollte in solchen Fällen

null zurück Obwohl null Rückkehr würde in solchen Fällen logisch erscheint, ist es nicht wirklich ideal, denn normalerweise gibt es ein ClientRect Objekt mit den Eigenschaften oben, rechts, unten, links, Breite und Höhe, und Code wie dieser würde brechen:

console.log(clientRectObject.height); 
// TypeError: Cannot read property 'height' of null 

Mit anderen Worten, die API wäre auf diese Weise nicht konsistent.