Chrome rendering issue?

Question

I'm using Chrome 53.0.2785.143 and I came across a rendering issue that seemed to happen more frequently on my application when using CSS transform scale.

Here's a JSFiddle which shows the issue, try to scroll down all the way, eventually you'll reach a stage where nothing will be rendered. On Firefox this JSFiddle will work fine.

HTML

<div class="content">
Rendering issue 
...
...
(you need to repeat this ~75000 times)
</div>

CSS

.content {
  background-color: white;
  color: red;
  width: 600px;
  font-size: 100px;
}

I'm wondering if anyone else came across this issue, and knows how to deal with it.

Answer 1

I posted this issue to Chromium and they answered back that this example does reach a paint limit. Link to issue

"The computed height on the div is 1.725e+07px, so it's not surprising we stop rendering it. We do render something up to 1.665e+07px.

This is WontFix. At some point we need to limit the size of the painted area, and this seems reasonable."