Unable to wrap the EasyZoom element with an href.
VernonGrant opened this issue · 2 comments
Hi,
Thanks for the awesome package. There seems to be a bug when wrapping the .easyzoom
element with an href. It seems to automatically copy the href node inside of the .easyzoom
element and then tries to use it as the Zoom image href. See the below example.
Example:
<!-- original markup-->
<a href="http://example.com">
<div class="easyzoom">
<a href="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/150" alt="" />
</a>
</div>
</a>
<!-- markup after in dev tools -->
<a href="http://example.com"></a>
<div class="easyzoom is-error">
<a href="http://example.com"></a>
<a href="https://via.placeholder.com/600">
<img src="https://via.placeholder.com/150" alt="">
</a>
</div>
Your original markup contains an error, an anchor inside an anchor, which is covered in the spec:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
- https://www.w3.org/TR/2011/WD-html5-author-20110809/the-a-element.html
Invalid markup will be interpreted and worked around in different ways by different browsers but I don't think any will allow what you are attempting to do here.
That makes sense. Thanks @i-like-robots