Removing and re-adding a CSS element property changes the position of the element

Question

I am encountering something really strange with my HTML / CSS.

When I reload the page sometimes , one of my elements gets to where it should be (in the center vertically), and sometimes it leaves the viewport (something like 700px above the top of the page).

The fact that a page acts differently on different page loads is only half the oddity. If I delete the property body height: 100%and add it to the web inspector again, all the magic fix. ( body- This is the direct parent element.)

My instinct tells me that the answer to the first part of the oddity is that there is some kind of race condition, as a result of which things happen in a different order randomly. But I'm not sure what it can be and why it affects things.

What could cause the same CSS attribute to be removed and re-added from the element to change the page layout?

I cannot reproduce in jsfiddle, unfortunately, but here's the gif of this in action:

Edit: A new piece of the puzzle. I found that this only happens in Chrome and apparently only happens if the page has an empty hash loaded at the URL.

• http://myurl.com works
• http://myurl.com/#foo works
• http://myurl.com/# intermittently

, @Huangism , ( , , ).

Answer 1

. - , , , ...

, - , URL-, , , , API html5.

:

// when the page is ready...
$(function() {
    // if the url ends with a "#" (and the browser supports it...)
    if(window.location.href && window.location.href.indexOf('#') == window.location.href.length - 1 && window.history) {
        // clear the darn empty hash using the html5 history API
        window.history.replaceState({}, '', './');
    }
});

Answer 2

, ,

, jquery - div, ,

, $el - div jquery

$el.hide().height();
$el.show();

, .

Answer 3

Try setting the height using js or jquery.

It seems that when you reload the page, your CSS attributes are set to the body tag via style = "" and then quickly deleted. Probably something in your js