diff --git a/packages/shared/is-visible.js b/packages/shared/is-visible.js index 3f9030151..a7d52f379 100644 --- a/packages/shared/is-visible.js +++ b/packages/shared/is-visible.js @@ -5,7 +5,15 @@ */ function isStyleVisible(element) { - const { display, visibility, opacity } = element.style + if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) { + return false + } + + // Per https://lists.w3.org/Archives/Public/www-style/2018May/0031.html + // getComputedStyle should only work with connected elements. + const { display, visibility, opacity } = element.isConnected + ? getComputedStyle(element) + : element.style return ( display !== 'none' && visibility !== 'hidden' && diff --git a/test/specs/wrapper/isVisible.spec.js b/test/specs/wrapper/isVisible.spec.js index 9c6b0478d..bd6708771 100644 --- a/test/specs/wrapper/isVisible.spec.js +++ b/test/specs/wrapper/isVisible.spec.js @@ -176,4 +176,19 @@ describeWithShallowAndMount('isVisible', mountingMethod => { expect(wrapper.find('.child.ready').isVisible()).toEqual(true) }) + + it('returns false if element has class with opacity: 0', async () => { + const style = document.createElement('style') + style.type = 'text/css' + document.head.appendChild(style) + style.sheet.insertRule('.opacity-0 { opacity: 0; }') + + const compiled = compileToFunctions('
') + const wrapper = mountingMethod(compiled, { + attachTo: document.body + }) + expect(wrapper.get('#my-div').isVisible()).toBe(false) + + document.head.removeChild(style) + }) })