Chrome Does Not Redraw <Div> After It Is Hidden

Chrome does not redraw div after it is hidden

Clearly, this is a WebKit bug.

I found that adding -webkit-transform: scale3d(1,1,1); fixes it:

http://jsfiddle.net/thirtydot/y7NdR/5/

I'm not sure if there are any downsides to this fix. I guess this works because inside WebKit, different code is used to render 3D transforms.

Chrome doesn't redraw page when needed

You are using ajax synchronously rather than asynchronously meaning javascript execution halts during the request. To fix make the following change:

XMLHttpRequestObject.open("POST", url, true);

You need to use a callback for the behaviour after the request is complete. Something like this:

    function postDataSync(url, params, success)
    {
        var XMLHttpRequestObject = false;
        if (window.XMLHttpRequest) 
        {
            XMLHttpRequestObject = new XMLHttpRequest();
        } else 
            if (window.ActiveXObject) 
            {
                XMLHttpRequestObject = new
                ActiveXObject("Microsoft.XMLHttp");
            }
        if(XMLHttpRequestObject) 
        {
            XMLHttpRequestObject.open("POST", url, true);
            XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            XMLHttpRequestObject.send(params);
            XMLHttpRequestObject.onreadystatechange = function() {
                if (XMLHttpRequestObject.readyState == 4 &&
                XMLHttpRequestObject.status == 200) 
                {

    var result = XMLHttpRequestObject.responseText;
                    delete XMLHttpRequestObject;
                    XMLHttpRequestObject = null;
                    if (typeof success === 'function') success(result);
                }
            }
        }
        return '';  
    }

function SaveConfiguration()
{
    var errors=checkForm();
    if(errors!="")
    {
        printError("Can't save configuration because there are errors in current tab:<br><br>"+errors);
        return;
    }
    showLoadingScreen(true);
    saveTab();
    postDataSync('actions/saveconf3.php','', saveComplete);
}

function saveComplete(result) {
  showLoadingScreen(false);
  alert("Settings saved. The modem is now being reconfigured.");
  document.location = "http://" + result;
}

Redraw/Repaint Issue with show/hide in Chrome

Ok, your issue is primarily a css issue. You're using a jquery function which gives and inline css attribute to a selected element. Indeed, display:none which is assigned to an element via the .hide method will remove the height and width of an item. However, you're hiding a child element, and you need to be hiding the container element for the css structure to be effected.

---

jquery

    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-header').show();
    } else {
        $('.navbar-header').hide();
    }

---

css

.navbar-brand {
    position: relative;
    padding: 5px 15px;
}

Chrome redraw issue

Chrome is getting buggier. Something worth trying is forcing gpu hardware acceleration on the element.

Add this to the CSS to force hardware acceleration:

-webkit-transform: translate3d(0, 0, 0);

Chrome + jQuery: Div not refreshing?

I was having a similar issue with Chrome and jQuery where I was taking an element, populating its content via $('#myElem').html(content);

What I found is that the actual innerHtml of the div was properly being updated, but the screen wasn't refreshing. I could highlight the text in the div and see that what I was originally seeing (the old incorrect text) was actually just an artifact that was still on the screen, but the text that was being highlighted was the correct text that was supposed to overwrite the original.

The easiest fix is to force the page to refresh the entire control. I did this through modifying the appearance of the actual element.

Here is an example of the fix that worked for me (using your code):

var clickHandler = function(e) {
    var el = e.target;
    if(el == $highlightBox[0]) {
        $highlightBox.hide();
        el = document.elementFromPoint(e.clientX, e.clientY);
        $highlightBox.show();
    }
    $frame.append(getSelector(el) + '<br/>');

    // My Add to force re-rendering of control
    $frame.height($frame.height() + 1);  // re-renders control
    $frame.height($frame.height() -1);   // resets to original height
}

Google Chrome does not resize content when toggling overflow property

I've managed to fix the problem with Javascript, though it feels like some black magic. If there is a CSS solution, I'd be happy to accept it.

/* force redraw of the node */
$(".content").on("mouseleave", function () {
   var el = $("<div></div>");
   el.appendTo(this);
    setTimeout(function () {
        el.remove();
    },1);
});

jsFiddle with this solution

---

Related Topics