leekyrave
15.01.2021, 13:40
Хай,есть сайт - tools.mint-plantation.ru и в нем можно увидеть баг,когда пролистываешь вниз - градиент багается
Сам код:
HTML:
☰
Mint Tools
зачем...
Mint Plantation © 2021
Все права защищены.Любое копирование материала запрещено!
Любое копирование материала запрещено!
CSS:
body
{
background-image
:
linear-gradient
(
135deg
,
#EAD6EE
,
#A0F1EA
)
;
font-family
:
"Lato"
,
sans-serif
;
display
:
flex
;
flex-direction
:
column
;
height
:
-webkit-fill-available
;
}
html, body, #wrap
{
height
:
100%
;
}
body > #wrap
{
height
:
auto
;
min-height
:
100%
;
}
#main
{
transition
:
margin-left .5s
;
padding-bottom
:
150px
;
}
#particles-js
{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
-50
;
}
#footer
{
position
:
relative
;
margin-top
:
-150px
;
/* negative value of footer height */
height
:
150px
;
clear
:
both
;
}
/* CLEAR FIX*/
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
.clearfix
{
display
:
inline-block
;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height
:
1%
;
}
.clearfix
{
display
:
block
;
}
/* End hide from IE-mac */
.footer .text
{
position
:
absolute
;
left
:
50%
;
margin-right
:
-50%
;
transform
:
translate
(
-50%
,
-50%
)
;
font-family
:
"Lato"
,
sans-serif
;
}
Как починить?
Сам код:
HTML:
☰
Mint Tools
зачем...
Mint Plantation © 2021
Все права защищены.Любое копирование материала запрещено!
Любое копирование материала запрещено!
CSS:
body
{
background-image
:
linear-gradient
(
135deg
,
#EAD6EE
,
#A0F1EA
)
;
font-family
:
"Lato"
,
sans-serif
;
display
:
flex
;
flex-direction
:
column
;
height
:
-webkit-fill-available
;
}
html, body, #wrap
{
height
:
100%
;
}
body > #wrap
{
height
:
auto
;
min-height
:
100%
;
}
#main
{
transition
:
margin-left .5s
;
padding-bottom
:
150px
;
}
#particles-js
{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
-50
;
}
#footer
{
position
:
relative
;
margin-top
:
-150px
;
/* negative value of footer height */
height
:
150px
;
clear
:
both
;
}
/* CLEAR FIX*/
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
.clearfix
{
display
:
inline-block
;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height
:
1%
;
}
.clearfix
{
display
:
block
;
}
/* End hide from IE-mac */
.footer .text
{
position
:
absolute
;
left
:
50%
;
margin-right
:
-50%
;
transform
:
translate
(
-50%
,
-50%
)
;
font-family
:
"Lato"
,
sans-serif
;
}
Как починить?