Consider the following dom:
<style>
.target {
width: 0;
height: 50px;
overflow-y: scroll;
}
.sub {
height: 200px;
width: 200px;
background: blue;
}
</style>
<div class="target">
<div class="sub">Hello World</div>
</div>
Calling axe.commons.dom.isVisible on the .target element results in true, even though visually the element is hidden. However, if we swap the width/height values, the element is then considered hidden. It seems our isVisible function only looks at height as a way to hide the element but does not consider width.
.target {
width: 50px;
height: 0;
overflow-y: scroll;
}
This is the cause of #2674
Consider the following dom:
Calling
axe.commons.dom.isVisibleon the.targetelement results intrue, even though visually the element is hidden. However, if we swap the width/height values, the element is then considered hidden. It seems our isVisible function only looks at height as a way to hide the element but does not consider width.This is the cause of #2674