frontity / frontity.org

The Frontity project of the frontity.org site
https://frontity.org
44 stars 19 forks source link

body background keeps showing on scroll #145

Open MohammedAlasaad opened 3 years ago

MohammedAlasaad commented 3 years ago

Hi, I noticed when we scroll down the background body #f6f6f9 keeps showing for a bit the it disappear.. not sure is there any css to fix that!.

to test that set the body background to darker color for ex. #26264a and try scroll down maybe faster scroll will still show the body background.

SantosGuillamot commented 3 years ago

Thanks for reporting @Mohammedalasaad :slightly_smiling_face:

Unfortunately, I am not able to reproduce it. Do you have a demo where we can see the problem? Could you share your browser and its version to see if that could be the cause please?

MohammedAlasaad commented 3 years ago

Hi @SantosGuillamot , I did this video so its easy to see the issue.. check video at time 00.03 and 00.04 .. I think its maybe something with the clip-path. and not sure if every section that has clip-path should have overflow:hidden; video link here https://streamable.com/1ki0t8

SantosGuillamot commented 3 years ago

Thanks a lot for the video! Does it happen only the first time you scroll down? I mean, if after doing the first scroll, you get back to the top and repeat the process, does it happen?

I feel it could be due to the lazy loading we are adding to some elements of the web like the iframe or the tweets, and you get that effect while they are being loaded.

MohammedAlasaad commented 3 years ago

Hi @SantosGuillamot no problem :) .. not only on first scroll.. happen as well when I go up and scroll down again. Its not really smooth as normal site.. Not sure really if its lazy loading or the sections that has clip-path.. As I tested to remove all these sections and css that has clip-path and its works nice and smooth!.

.wp-block-group.wp-react-made-easy {
    padding: 100px 0px 136px;
    -webkit-clip-path: polygon(0 0,100% 40px,100% 100%,0 calc(100% - 72px));
    clip-path: polygon(0 0,100% 40px,100% 100%,0 calc(100% - 72px));
}