Why does the text disappears after I scroll down the webpage scroll and then up

I am not a coder at all so appreciate if anyone here could help...

Just noticed a bug in my homepage. When I scroll the page and then to the top again, the content which is above the fold just suddenly goes missing. But the rest are just fine. The content there are just H1, <p> and then a button.

But this weird situation only happens in Chrome. When I browse my website in FireFox and Opera, those contents are just visible....

Chrome is probably trying to optimize the content painting, are you using any css positioning? It happens sometimes with absolute position elements i think,

Sounds like a caching issue or grouping objects together.
Would start there first.

I guess it's nothing related to CSS - see the code below. I also cleared the cache and still have the same issue.

My website is being hosted on Squarespace. The content in question come from 3 blocks.

1st block
<h1 style="..........</h1>

2nd block
<p><span style="xxxxxx">xxxxxxxxx</span></p>

3rd block
<!--Button-->
<center>
<table align="center" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" style="padding: 10px;">
<table border="0" class="mobile-button" cellspacing="0" cellpadding="0">
<tr>
<td align="left" bgcolor="#ff5656" style="background-color: #ff5656; margin: auto; max-width: 600px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 15px 20px; " width="100%">
<!--[if mso]>&nbsp;<![endif]-->
<a href=xxxxxxx target="_blank" style="18px; font-family: proxima-nova; color: #ffffff; font-weight:normal; text-align:center; background-color: #ff5656; text-decoration: none; border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; display: inline-block;">
<span style="font-size: 18px; font-family: proxima-nova; color: #ffffff; font-weight:normal; line-height:1.5em; text-align:center;">Book a Free Consultation</span>
</a>
<!--[if mso]>&nbsp;<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>

Actually, I managed to just have them fixed by adding the below code in each of the code block

-webkit-transform: translateZ(0);

I don't know what it means, but it works....

Cheers all!