CODEWITHSUNDEEP
javascriptcssgoogle-chrome
Salvatorelab
Salvatorelab

Reputation: 11873

Solution for fixed & hidden div bug on Google Chrome

Problem: A div with visibility:visible inside a parent div with position:fixed and visibility:hidden causes rendering problems in Google Chrome. Images and examples can be found here.

A week ago you could just add the -webkit-transform:translateZ(0) to the parent div and bug solved. But it isn't working anymore:

Both are bugged.

So, is there any solution? When you resize the window, it repaints the divs, also when you open the developer tools the bug disappears.

So I've been trying to force a repaint with javascript (jQuery):

jQuery(window).scroll( function() {
    jQuery("#parentDiv").addClass("nothing");
    jQuery("#parentDiv").removeClass("nothing");
});

And it sometimes works (when a textfield is displayed inside the inner div). Really weird. Also tried hiding and displaying the div, adding css properties (fixed, bottom:0...) But nothing works fine.

Any ideas?

EDIT2: Seems like it only happens to me: 2 friends, using windows and the latest version (17.0.963.79) don't see the bug in the second link. But I still see it. I've reinstalled chrome under windows, and the bug is still there. I also have cleared the cache, but nothing changes. Am I the only one????

Upvotes: 3

Views: 3061

Answers (1)

Mark
Mark

Reputation: 6865

from my own experience when working with scroll(), all form-elements behave strangely, or do not function anymore.

You solution -webkit-transform:translateZ(0) will fix it for webkit browsers, but all others browsers will trow a translated layer above all form-elements, result is that form-element are not accessible anymore.

scroll() is a great solution for just plain info (text- images), not for forms.

Upvotes: 3

Related Questions