使用javascript问题更改弹性框宽度

时间:2015-04-21 16:13:59

标签: javascript html css firefox flexbox

我正在开发一个主要基于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。

谢谢!

1 个答案:

答案 0 :(得分:0)

我知道这是旧的,但我正在尝试做类似的事情,在我的情况下,使用javascript(angular)更改width会导致比计算宽度低50px。 如果您想为flex设置准确值,则应使用您的javascript代码设置widthmin-width

这是一个解决我问题的代码:

el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';