frontity.org icon indicating copy to clipboard operation
frontity.org copied to clipboard

body background keeps showing on scroll

Open MohammedAlasaad opened this issue 4 years ago • 4 comments

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.

MohammedAlasaad avatar Nov 12 '20 07:11 MohammedAlasaad

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?

SantosGuillamot avatar Nov 12 '20 10:11 SantosGuillamot

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

MohammedAlasaad avatar Nov 12 '20 12:11 MohammedAlasaad

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.

SantosGuillamot avatar Nov 13 '20 12:11 SantosGuillamot

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));
}

MohammedAlasaad avatar Nov 13 '20 18:11 MohammedAlasaad