Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve error message when trying to interact with element that is hidden because of low opacity #398

Open
calebeby opened this issue Feb 2, 2022 · 0 comments
Labels
debuggability improvement Ways to improve the debugging experience good first issue Good for newcomers

Comments

@calebeby
Copy link
Member

calebeby commented Feb 2, 2022

Currently if you try to click/type an element that has low opacity to the point of not being visible, here is the error message:

Cannot perform action on element that is not visible (it is near zero opacity):
<...element ...>

It would be easier to debug if it cascaded up the DOM tree and printed out any non-opaque element:

Cannot perform action on element that is not visible (it is near zero opacity):
<input ...>

Its ancestor, this <div>, has an opacity of 0.02:
<div ...>

Or if there are multiple:

Cannot perform action on element that is not visible (it is near zero opacity):
<input ...>

Its ancestor, this <div>, has an opacity of 0.25:
<div ...>

Another ancestor, this <div>, has an opacity of 0.25:
<div ...>

Another ancestor, this <div>, has an opacity of 0.25:
<div ...>

This results in the <input> having a net opacity of 0.016, which is not visible.
@calebeby calebeby added good first issue Good for newcomers debuggability improvement Ways to improve the debugging experience labels Feb 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
debuggability improvement Ways to improve the debugging experience good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant