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

becks14

Junior Member
Joined
Jan 15, 2020
Messages
151
Reaction score
73
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....
 

M0n3y.

Regular Member
Joined
May 13, 2019
Messages
360
Reaction score
331
Chrome is probably trying to optimize the content painting, are you using any css positioning? It happens sometimes with absolute position elements i think,
 
D

Deleted member 708208

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

becks14

Junior Member
Joined
Jan 15, 2020
Messages
151
Reaction score
73
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>
 

becks14

Junior Member
Joined
Jan 15, 2020
Messages
151
Reaction score
73
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!
 
Top