NO BUG: SVG icon flashing when loading page

Bugs
1
  • I made an ACF option page, with “Header Banner”
  • I made a section template in Bricks and add condition Hook “bricks_before_header”
  • I added a close icon, and do it with interaction. (click > hide element > Section Id)

Its loading perfectly, but I have a big problem with it.

I tried out put the icon with SVG element and Bricks Icon Element but the problem is same.
When loading the page, the close icon is flashing once every page load from a huge size to correct size.
I tried out lots of solution with sizing the icon but not working. :frowning: (or cant figure out)

Here is a video from the flashing.

https://jam.dev/c/afc78368-d772-41e4-8cee-61fdc1529639

2

Have you tried wrapping your svg in a div? Because you have that text and svg sitting there by itself within the container, that svg will expand to the full width of the container. So isolate that svg inside a div.

3

Yes I tried it. With Icon element and SVG element too. I tried to add fixed width and height to icon, svg, and div too.

4

Do you have an url? Hard to tell other wise.

5

It was my fault sorry. Your idea was good, just I was the blid mouse. :smiley:
Yes. I wrapped into a div (not block) and the flasing is gone.

Thanks your idea!

6

Excellent! Glad it got worked out. =]

Yah, the block still takes up the full width, whereas the div takes up the space that is determined by what is inside of it.

Cheers