Last active
July 16, 2019 02:48
-
-
Save biancadanforth/61516998a37dfbaecc91fae4af7d5705 to your computer and use it in GitHub Desktop.
Performant and comprehensive rewrite (Rev 1 is BEFORE, Rev 2+ is AFTER) of `isVisible` in Price Tracker (https://github.com/mozilla/price-tracker/)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Avoid reading `display: none` due to Bug 1381071 | |
isVisible(fnode) { | |
const element = fnode.element; | |
if (element.getBoxQuads().length === 0) { | |
// The element has no box (display: none subtree?), checking | |
// getBoundingClientRect instead for a width and height of 0 only tells | |
// us it is a zero-sized box. | |
return false; | |
} | |
const eleStyle = getComputedStyle(element); | |
if (eleStyle.visibility === 'hidden') { | |
return false; // not painted. | |
} | |
// This is assuming inclusive ancestors, otherwise we need to check opacity | |
// above too. | |
for (const ancestor of ancestors(element)) { | |
const style = getComputedStyle(ancestor); | |
if (style.opacity === '0') { | |
return false; | |
} | |
if (style.display === 'contents') { | |
// display: contents elements have no box themselves, but children are | |
// still rendered. | |
continue; | |
} | |
const rect = ancestor.getBoundingClientRect(); | |
if ((rect.width === 0 || rect.height === 0) && style.overflow === 'hidden') { | |
// This is a zero-sized box; zero-sized ancestors don’t make descendants | |
// hidden unless the descendant has overflow: hidden | |
return false; | |
} | |
} | |
return true; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
eleStyle
should bestyle
, it's the zero-sized box which needsoverflow: hidden
to actually hide it.