Query loop image not render in firefox

How To
1

Hi Bricks Community!

I have made a query loop for nestable slider and made some dynamic datas as usual.

I tested it lots of browser (Chrome, Brave, Arc, Firefox)
Every browser render my dynamic brand logos (logos are SVG-s) only the firefox can’t do it.

Is it a bug or user error? If it is my fault, how can i solve this problem?

Thanks for your support!

Bricks Editor:

image
image1920Ă—653 255 KB

Chrome, Arc, Brave browsers:

image
image1920Ă—1506 716 KB

FireFox:

image
image1920Ă—1133 505 KB

2

Have you tried putting sizing on your svg or parent div?

3

So I actually had a look at your site and the code that is being outputted.

The screenshot you are showing is show is not the same as your code. Your code shows this structure.

<figure><img /></figure>

So it is not being wrapped in a Div like your screenshot shows.

I would recommend using a div element with the svg element inside of it. Then change the HTML tag on your div to figure. Make your parent a relative position and the child (figure) a absolute top: 0; left: 0;.

4

Hi,
Thanks so much for your report!

Unlike images, SVGs do not have an intrinsic width or height, so the img tag does not have a width or height attribute. Firefox seems to handle this differently than other browsers. However, the solution is very simple: give the img a width and height.

image
image1920Ă—1200 553 KB

Best regards,
timmse

5

Hi @timmse!

Here is some screenshot.

The brand image has a wrapper div (absolute position)
Max-width:120px
Max-height: 60px

The image element (dynamically render the brand svg logo) has
width: 100%
height: 100%

So I think it has size attributes. :smiley:

But yes, if I add manually fixed widht and heigh values (add to image element 120px and 60px is render the svg image in firefox, but the design is not scalable and broken down.

image
image1358Ă—858 166 KB

image
image1042Ă—220 54.1 KB

6

100% width/height refers to the calculated size of the parent element—not to its max-width or max-height. And that is where your problem lies: Your parent has upper limits, but no actual size. In fact, the img and your figure tag both use 100% width and height, and your wrapper div only has a max width/height.

In your screenshot, it breaks because the width and the height are added to the class which is attached to the figure tag, not the img inside. So either you create a custom selector to target the img, or just add custom CSS to the image element’s class:

%root% img {
  height: 20px;
  width: auto;
}
7

Hi @timmse!

Thanks for you time and support. I tried it, and it was not optimal, because firefox is very tricky.

Fo the community here is my solution. This is responsive and scale together the “product” cards.

If you know something like this, it might be a good idea to move the post to the How To category instead of Bug so that the problem and its solution are available to others.

Wrapper DIV:

image
image549Ă—680 22.8 KB

Inside wrapper the image element: (for the right position you have to change the position inline-flex in the image element)

image
image554Ă—1031 35.2 KB