Google's reCAPTCHA v2 displays layering problems when included in a HTML <dialog>
triggered with .showModal()
.
The challenge element with the question and the images is layered underneath the dialog instead of on top.
Try this demo in a browser which natively supports the HTML5 dialog, such as Chrome:
The offending code is the document.body.appendChild(a.P)
in the reCAPTCHA JavaScript, which appends the challenge div to the document body. I've thought about monkey-patching this to append to the dialog
instead, but this is also not an ideal solution.
One workaround is to use the .show()
method instead of the .showModal()
method:
Is there a more correct solution, that is less like a workaround?
Invoking the dialog using .show()
and mimicking the styling of the .showModal()
method seems to be the best solution for now:
http://jsfiddle.net/karlhorky/b3hjdqeL/9/
Unless Google updates reCAPTCHA for use inside <dialog>
s, this is the cleanest solution I've come up with.