我正在开发一个主要基于flexbox的用户界面,基本上可以分解为内容区域和可以切换的侧边栏(通过添加/删除类来改变其宽度)。
切换侧边栏时,会通过javascript手动调整内容区域的大小。它包含一个需要重绘的svg画布,所以这不能通过CSS完成。 Chrome可以完美地处理此代码。
然而,Firefox和Safari表现得非常奇怪,有趣的是不一样。我能够在小提琴中重现这种行为:http://jsfiddle.net/q1yp6ssw/21/
这也适用于常规<div>
,而不仅仅是<svg>
,您可以在此处看到:http://jsfiddle.net/mqok5exb/2/
toggleSidebar()
调用函数resizeSvg()
,该函数使用其父级的大小调整“svg”元素的大小。
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
如果您在Firefox中测试这些小提琴,您会注意到内容区域过早调整大小并变得比应有的大,将侧边栏推到容器的原始尺寸之外。 使用setTimeout
延迟调整大小无效。
这似乎是计时和每个浏览器呈现父元素的更新大小的问题。 没有转换的行为是相同的,所以这不是问题。
我的问题:造成这种情况的原因是什么,如何解决,或者至少找到可用的解决方法?如果结果是flexbox问题,那么可以替换flexbox。
谢谢!
答案 0 :(得分:0)
我知道这是旧的,但我正在尝试做类似的事情,在我的情况下,使用javascript(angular)更改width
会导致比计算宽度低50px。
如果您想为flex设置准确值,则应使用您的javascript代码设置width
和min-width
。
这是一个解决我问题的代码:
el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';