AJAX response shows up, then disappears in Chrome

问题:

I have an issue that I think is related to a recent update in Google Chrome. Until July 2017 it worked without a hitch. I just tried it with Microsoft Edge and it works there, no problem.

On Chrome, I make an AJAX request to update the list with 6 new products. They show up, but then an instant later they disappear. Actually, they are still there, since if I hover over them, some information shows up. If I highlight them (with the mouse or CTRL+A) and click elsewhere, most of the time they stay visible.

Does anyone know what I can do to fix this? Sorry I'm not posting code, I don't even know which part of it I would need to post. As I said, I doubt the problem is in the code, since I haven't changed it in the last six months or more and this problem showed up about a month ago (at the same time on more than one computer).

回答1:

This is due to an error in Chrome (from V60) where Chrome forgets to re-render elements under certain conditions.

A way to fix it using CSS, is to use translateZ(0) to force chrome to rerender the content.

.your-element {
  transform: translateZ(0);
}