Currently, I am developing a user interface that heavily relies on flexbox. The layout consists of a content area and a sidebar that can be toggled by adding or removing a specific class.
Whenever the sidebar is toggled, the content area needs to be manually resized using JavaScript. This is necessary because there is an SVG canvas inside that requires redrawing, a task not achievable through CSS alone. Surprisingly, while Chrome handles this code flawlessly, Firefox and Safari exhibit peculiar behaviors, albeit in different ways.
To showcase the issue, I have replicated the problem in a fiddle: http://jsfiddle.net/q1yp6ssw/21/
The problem is not specific to just the <svg> element but also occurs with a regular <div>, which you can observe here: http://jsfiddle.net/mqok5exb/2/
The function toggleSidebar() triggers the execution of resizeSvg(), responsible for resizing the "svg" element based on the dimensions of its parent.
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
In my tests, I observed that when viewed in Firefox, the content area prematurely expands beyond the intended size, causing the sidebar to extend past the original container boundaries. Even attempting to delay the resizing operation using setTimeout proved ineffective.
The issue appears to revolve around the timing of rendering, as both browsers struggle to update the size of the parent element consistently. Interestingly, the problem persists even without any transition effects applied.
Hence, I seek assistance in understanding the root cause of this anomaly and identifying potential solutions or workarounds. Should the culprit be linked to flexbox intricacies, I am open to exploring alternative layout approaches.
Thank you for your help!