4

I'm having an issue similar to the old IE peekaboo bug. Some text is visible in every other browser, but in Chrome (v. 21.0.1180.77 m) it is hidden until highlighted or viewed in developer tools, at which point it appears normally.

Has anyone else seen this? Any idea for a fix?

Text missing:

Text missing
(source: 116state.com)

Text after highlighting or inspecting element:

Text missing
(source: 116state.com)

Site url: http://116state.com

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
erfling
  • 384
  • 2
  • 16
  • its getting displayed id chromium 21.0.1180.57 – Vivek Chandra Aug 14 '12 at 22:38
  • Well, hopefully its a very short-lived issue and won't be seen by many. I wish I knew a fix for this. Just launched the site today and its rubbing my perfectionism the wrong way. – erfling Aug 14 '12 at 23:25
  • sounds like a webkit issue. I would take the element you are highlight and try it on a clean test page with its css. Try jsfiddle it and see if the problem can easily be reproduce. Then, you could open a bug on it and help us improve webkit. – Ido Green Aug 15 '12 at 07:47
  • Not sure yet, but I believe that this bug is related to the Bootstrap Carousel plugin I'm using on the slider. It only occurs in this version of Chrome, so it may be still be a webkit bug. – erfling Aug 17 '12 at 01:03

2 Answers2

4

It might be related to the fixed position bug in Chrome.

See here:

Fixed element disappears in Chrome

It suggests to add -webkit-transform: translateZ(0) to the position: fixed element.

It has worked for me.

Community
  • 1
  • 1
Paolo Mioni
  • 1,008
  • 10
  • 17
  • Had a similar issue. My JS replaced the content of a DIV, but Chrome (only Chrome) had the new content unreadably overlapping the old content. When I click-dragged my cursor over it to highlight, then clicked on white-space to un-highlight, everything looked correct. I used -webkit-transform: translateZ(0) on the DIV and it solved the problem! – gcdev Oct 07 '15 at 15:37
1

had the same kind of bug in chrome 23.0.1271.64 ... not yet sure I fixed it for good but applying a benign affine transform to the element in the form of:

element {
    -webkit-transform: matrix(1.0, 0.0, 0.0, 1.0, 0.00, 0.01);
}

seems to have dealt with the issue... of yours, ymmv, so good luck anyone...

blue
  • 11
  • 1
  • 2
    to clarify - the element == element having overflow: auto on it - iow, the one getting scrolled, not the one displayed within, sorry for not being perfectly clear ... the bug popped up for me inside an element with "overflow: auto" - when scrolling some of the content remained still until you clicked inside the element... – blue Nov 13 '12 at 10:08