5a69d912a6188f572040d3f6--algolia-instantsearch.netlify.com - design is broken

[Haroenv]

URL: https://5a69d912a6188f572040d3f6--algolia-instantsearch.netlify.com

Browser / Version: Firefox
Operating System: Mac OS X 10.13.4
Tested Another Browser: Yes

Problem type: Design is broken
Description: svgs don't have the correct size
Steps to Reproduce:
svg without viewbox and instead width + height don't behave as expected in a symbol in Firefox.

See the diff needed here: algolia/instantsearch#2675

cc @ronanlevesque

From webcompat.com with ❤️

[Haroenv]

see also algolia/instantsearch#2666 and algolia/instantsearch#2536 for images

[karlcow]

Thanks @Haroenv for the report.

I will make a reduced test case today to see how to handle the issue.

[karlcow]

<span class="inline pos-rel">
    <a 
        class="btn btn-static-primary btn-static-shadow-dark" 
        href="https://algolia.com/users/sign_up">Get Started
        <svg 
            class="arrow-icon" 
            width="22">
            <use xlink:href="#arrow-right"></use>
        </svg>
    </a>
    <svg class="search-icon" width="22">
        <use xlink:href="#search-icon"></use>
    </svg>
</span>

and

<svg style="display: none;">
    <symbol width="40"
        height="40"
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
        id="search-icon">
        <path d="M26.806 29.012a16.312 16.312 0 0 1-10.427 3.746C7.33 32.758 0 25.425 0 16.378 0 7.334 7.333 0 16.38 0c9.045 0 16.378 7.333 16.378 16.38 0 3.96-1.406 7.593-3.746 10.426L39.547 37.34c.607.608.61 1.59-.004 2.203a1.56 1.56 0 0 1-2.202.004L26.808 29.012zm-10.427.627c7.32 0 13.26-5.94 13.26-13.26 0-7.325-5.94-13.26-13.26-13.26-7.325 0-13.26 5.935-13.26 13.26 0 7.32 5.935 13.26 13.26 13.26z"
    
            fill-rule="evenodd"></path>
    </symbol>
    <symbol width="46"
        height="38"
        viewBox="0 0 46 38"
        xmlns="http://www.w3.org/2000/svg"
        id="arrow-right">
        <path d="M34.852 15.725l-8.624-9.908L24.385 3.7 28.62.014l1.84 2.116 13.1 15.05 1.606 1.846-1.61 1.844-13.1 15.002-1.845 2.114-4.23-3.692 1.85-2.114 9.465-10.84h-24.66v-5.615h23.817zm-26.774 0h-.002 2.96v5.614H0v-5.615h8.078z"
    
            fill-rule="evenodd"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 708.8 717"
        id="icon-copy">
        <path d="M658.8 158H490.2c-13.3 0-26 5.3-35.4 14.6l-4.6 4.6V25c0-13.8-11.2-25-25-25H235.6c-6.6 0-13 2.6-17.7 7.3L7.3 218C2.6 222.6 0 229 0 235.6V541c0 13.8 11.2 25 25 25h227.8v101c0 27.6 22.4 50 50 50h356c27.6 0 50-22.4 50-50V208c0-27.6-22.4-50-50-50zm-204 85.4V360H338.2l116.6-116.6zm-253-149.2V209H87L201.8 94.2zM50 516V259h176.8c13.8 0 25-11.2 25-25V50h148.4v177.3L267.5 360c-9.4 9.4-14.6 22.1-14.6 35.4V516H50zm608.8 151h-356V410h177c13.8 0 25-11.2 25-25V208h154v459z"></path>
    </symbol>
</svg>

and

.search-icon, .arrow-icon {
	margin-left: 1em;
	width: 22px;
	height: 42px;
	vertical-align: middle;
}

.arrow-icon {
	width: 16px;
}


svg:not(:root) {
	overflow: hidden;
}

Chrome left, Firefox Right.

[karlcow]

so in Firefox if I set the viewBox on the SVG it is working.

<span class="inline pos-rel">
    <a class="btn btn-static-primary btn-static-shadow-dark" href="https://algolia.com/users/sign_up">Get Started
        <svg class="arrow-icon" viewBox="0 0 46 38" style="outline: 1px solid gold;">
            <use xlink:href="#arrow-right"></use>
        </svg>
    </a>
    <svg class="search-icon" viewBox="0 0 40 40" style="outline: 1px solid gold;">
        <use xlink:href="#search-icon"></use>
    </svg>
</span>

Reduced test case
https://codepen.io/webcompat/pen/OzKyXd

Rendering

[karlcow]

I have opened https://bugzilla.mozilla.org/show_bug.cgi?id=1433360

[karlcow]

I'm closing as a duplicate of algolia/instantsearch#2536

Thanks @Haroenv for the report
it helps.

[Haroenv]

Yes, I know it’s a duplicate of our issue :) I was just making the issue here since FF was the only problem which had a problem with the display.

Have a nice day!

[karlcow]

Just to keep the record straight, this is a bug in Chrome per SVG2.
See the discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1433360#c2

[Haroenv]

Thanks for that update!