CODEWITHSUNDEEP
htmlcsssvg
Colt
Colt

Reputation: 13

SVG elements seem to ignore border-box sizing before reflow?

When using box-sizing: border-box; in CSS, the border of the element is included in the total width and height. I have SVG elements set to 100% width inside a parent div also using border-box, and when that SVG has a border set on it, there seems to be rendering/size issues.

I've replicated the issue on this stackblitz (with div elements for comparison): https://stackblitz.com/edit/typescript-xytlg2

I see the issue in Chrome and Firefox. In Firefox, the SVG elements have their borders extending past the purple div. In Chrome, they do the same, but hovering the mouse over each SVG will cause the border to be recalculated and then it fits inside the parent div. Removing the box-shadow CSS will cause that recalc effect to go away. Also, somehow, removing body { margin: 0px; } causes the SVGs to be rendered correctly inside the parent div, but isn't an ideal solution (and seems totally unrelated).

What is causing the SVG elements to be wider than 100%, when the div elements with the exact same CSS are properly rendered at 100% with the border inside the parent div?

Edit: CSS:

html, body { height: 100%; }
body { margin: 0px; } 

#main {
    display: flex; 
    height: 100%;
}

#sidebar {
    background-color: rgba(166, 64, 255, 0.07); 
    overflow-y: auto;
    height: 100%;
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
    border: 1px solid #A640FF;
}

.slide {
    margin-top: 6px;
    box-sizing: border-box;
    max-width: 100%;
    border: 5px solid #000000;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.slide:hover {
    box-sizing: border-box;
    border: 5px solid #3030F9;
    box-shadow: 0px 0px 5px 0px rgba(0,0,200,0.5);
}

HTML:

<!DOCTYPE html>
<div id="main">
  <div id="sidebar">
    <div class="slide"  max-width="100%" max-height="100%">div stuff</div>
    <svg class="slide"
        max-width="100%" max-height="100%" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
    </svg>
    <svg class="slide"
        max-width="100%" max-height="100%" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
    </svg>
    <div class="slide"  max-width="100%" max-height="100%">div stuff</div>
    <svg class="slide"
        max-width="100%" max-height="100%" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
    </svg>
  </div>
</div>

Upvotes: 0

Views: 898

Answers (1)

Jordan Wade
Jordan Wade

Reputation: 441

max-height and max-width aren't HTML attributes; removing them from index.html results in exactly the same behavior in Chrome, and DevTools insists that max-{height,width} are unset. Instead you should set the max-{height,width} CSS properties, either through a style attribute or in your style.css.

What seems to have happened is that Chrome computed the element width before box-sizing:border-box went into effect and your .slide:hover{box-shadow:…} is causing it to recompute the layout. Resizing the window also triggers this.

Upvotes: 1

Related Questions