Refresh/recalculate css

<div id="box1">
    <div id="box2" style="height:60%"></div>
</div>

Update - It turned out to be something silly: there was a parent div that I hadn't closed properly. I'm still curious why changing some css in the web inspector managed to fix it. Thanks everyone!

---

The problem happens in webkit browsers (Safari, Mobile Safari, Chrome, Android browser), but doesn't in Firefox:

On window resize, box1's height is changed with javascript, but box2 doesn't expand/contract to be 60% of b开发者_开发技巧ox1's new height UNTIL I go into web inspector and manually change any css rule of any element as long as it's not the style attribute of that element. (So the rule I change has to originate from inline css or a .css file - but it doesn't matter which file)

What is going on? Why does this happen? If there is some sort of recalculation or refreshing of the css, how do I force this to happen upon window resize?

---

I think this is a browser bug.

Maybe something like elemnt_box2.stye=element_box2.style would trigger an update, but this would be a workaround.

Bear in mind that DOM updates from Javascript are not fully-processed immediately, but after the script has finished executing. This is for efficiency. It might mean that cascading changes are not visible to the script until the next entry point.

---

I had a similar issue, where toggling float:left off then immediately back on would make a small div jump up or down a line, but like here, only on Chrome, not in Firefox. The solution that worked for me was removed an extra clear:left somewhere.

---

It turned out to be something silly: there was a parent div that I hadn't closed properly. I'm still curious why changing some css in the web inspector managed to fix it. Thanks everyone!