Orphaned Quotation Character After Closing Picture Element

Bootstrap Studio Help
1

I'm posting this issue here instead of the Bug Reports section because I'm not sure if this a bug. I would appreciate someone perhaps trying to replicate the problem to help determine what might be causing it.

I am using the <picture> element to provide support for Safari not being able to display WEBP images (currently - I know V14 is set to change that). By adding <srcset> to the <picture> element and providing two image format options - PNG and WEBP - Safari correctly selects the PNG image and renders it. Chrome, Firefox, and Edge are displaying the WEBP image without issue.

However, the <picture> element appears to be causing a strange issue in the HTML render/preview - the inclusion of an orphaned double quotation character after the closing </picture> tag. This does not appear in the design environment of Bootstrap Studio, only in the rendered HTML page of the browser. I have included the HTML output below in a simplified structure without all the required class attributes of the design - just the construct:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <a href="#">
        <div>
          <div><i class="fa fa-search fa-fw"></i></div>
        </div>
        <picture>
          <srcset="https://via.placeholder.com/900x660.png" type="image/png">
          <srcset="https://via.placeholder.com/900x660.webp" type="image/webp">
            <img src="https://via.placeholder.com/900x660.webp" width="900" height="660" alt="" />
        </picture>"
      </a>
    </div>
  </div>
</div>

The seemingly random quotation character is appearing immediately after the closing </picture> tag. There are two potential scenarios causing this:

1.) The inclusion of the <div> element which follows the <a> element, and

2.) The addition of the <srcset> attribute. The quotation character does not appear if the <srcset> is not added to the <picture> element.

The <div> contains a hover overlay and is part of the design - the search icon appears on the overlay.

I can resolve the issue by exporting the page out and editing out the quotation characters manually. But the design comes back as 'Custom Code' and I lose the functionality of Bootstrap Studio to build the page within its design environment.

I would grateful if someone can perhaps build this simple structure in a blank template to see if it produces the same problem, as I am unable to determine what is causing it. Your feedback and observations would be most helpful.

Many thanks,<br> Brendan

2

I've had a similiar issue with a design a few weeks ago. Didn't investigate, but I remember the quotation char appearing. And it was after a picture element with webp/jpg images inside it too. Tomorrow I'll check if I can find that old design.

i guess you spotted a bug here

3

Hi Marrco . . . thanks for the reply.

As indicated, I can't be sure about it being a bug because it doesn't appear without the parent <div> tag and it also doesn't seem to occur without the <srcset> tag. So it is a little strange and I can't find an origin for its appearance.

Whatever you can come up with will be helpful.

Thanks.

4

A simple link with a picture tag inside appears to give me (3) abandoned quotes after the picture tag so I would agree this is a "bug".