I'm posting this here as I'm not sure that it is a bug and would appreciate someone trying to replicate it in order to be certain.
I am replacing an<img /> element with a<picture> element to provide Safari with an alternative as it does not support webp images. The concept and functionality work perfectly - Chrome and Firefox display the WEBP image and Safari happily displays a PNG according to the srcset in the<picture> element.
However, as soon as I apply a value to the srcset attribute, the preview renders an orphaned double-quotation character (") immediately after the closing</picture> element. To help explain it, the basic structure and render is as follows (I'm using placeholders for context):
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<a href="#">
<div>
<div><i class="fa fa-search"></i></div>
</div>
<picture>
<srcset="https://via.placeholder.com/900x660 900w" type="image/webp">
<img src="https://via.placeholder.com/900x660" />
</picture>"
</a>
</div>
</div>
You'll notice immediately after the </picture> element there is an orphaned quotation character. There appears to be no origin for this character and it only appears under the following conditions:
1.) The inclusion of the <div> element which contains the hover overlay and a search icon which appears on hover
2.) The addition of the srcset value - the problem only seems to appear as soon as this value is entered. If left blank, the quotation character doesn't appear
If you remove the <div> element, the quotation character disappears. An empty <div> element also generates the problem
I just cannot work out why this is happening and thought that maybe someone on the forum could shed some light on it. One solution is to export the whole page and remove the quotation characters in an external editor. But that means the page comes back to Bootstrap Studio as 'Custom Code' and I lose the GUI ability within Bootstrap.
I'd be grateful for any input towards resolving this.
Many thanks