This only happens in Firefox since you have to specify and actual width instead of using height 100% or something (which works fine in Chrome).
I notice that the WordPress Search page my svg logo (using the header logo element) does not display in Firefox browsers. I do set the width in the class to 18em which works on all other pages.
Inspecting the header logo on another page the class with the specified width comes first
so the logo displays fine.
On the search template/page it does not
which results the logo displaying with 0 width and 0 height since the width auto doesn’t work correctly in Firefox.
It looks like Bricks has mixed up the order of the classes when the Search Template is used.
Obviously I can set the width to !important but that is not a fix and just a workaround for the bug.
Also if I switch Bricks to inline styles (instead of External CSS files) it works fine on the Search Page.
I can’t reproduce the problem with the current dev version, which is 99.9% Bricks 1.9.9, which will be released soon. Please test it again after the release. If it still doesn’t work, a live link would be helpful.
PS: Compared to images, SVGs do not have an intrinsic width or height, so assigning either a width, height, or both is always a good idea.
The problem is due to the styles’ incorrect loading order/position, which we are working on. It was impossible to guess without a live link, though.
I’ve now assigned the width of the logo to the ID, so it has a higher specificity than the styles that override it. As far as I can see, it works on Firefox now, too.
I am marking this thread as a duplicate. As soon as the problem is solved, we will update this report:
