Expand check for offset parents to also check children of ancestor fo…

…r positioning attributes

close #4395
close #755

packages/driver/src/dom/elements.js

@@ -390,6 +390,10 @@ const isAncestor = ($el, $maybeAncestor) => {
   return $el.parents().index($maybeAncestor) >= 0
 }
 
+const isChild = ($el, $maybeChild) => {
+  return $el.children().index($maybeChild) >= 0
+}
+
 const isSelector = ($el, selector) => {
   return $el.is(selector)
 }
@@ -818,6 +822,8 @@ module.exports = {
 
   isAncestor,
 
+  isChild,
+
   isScrollable,
 
   isTextLike,

packages/driver/src/dom/visibility.js

@@ -176,9 +176,9 @@ const canClipContent = function ($el, $ancestor) {
   const $offsetParent = $jquery.wrap($el[0].offsetParent)
 
   // even if overflow is clippable, if the element's offset parent
-  // is a parent of the ancestor, the ancestor will not clip the element
+  // is a parent or child of the ancestor, the ancestor will not clip the element
   // unless the element is position relative
-  if (!elHasPositionRelative($el) && $elements.isAncestor($ancestor, $offsetParent)) {
+  if (!elHasPositionRelative($el) && ($elements.isAncestor($ancestor, $offsetParent) || $elements.isChild($ancestor, $offsetParent))) {
     return false
   }
 
@@ -399,7 +399,6 @@ const getReasonIsHidden = function ($el) {
     return `This element '${node}' is not visible because it has CSS property: 'visibility: collapse'`
   }
 
-      return `This element '${node}' is not visible because it has an effective width and height of: '${width} x ${height}' pixels.`
   if (elHasNoOffsetWidthOrHeight($el)) {
     return `This element '${node}' is not visible because it has an effective width and height of: '${width} x ${height}' pixels.`
   }