Контент в мобильных браузерах

#html #css

Страница не корректно отображается в некоторых мобильных браузерах (UC Browser) --
после скролла вниз весь контент, что находится ниже окна браузера, прячется за белым
фоном. https://jsfiddle.net/0hey4jkw



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before,
*:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #593c1e;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
/*
=================================
				BACKGROUND STYLE
=================================
*/
.background {
  height: 100%;
  position: fixed;
  width: 100%;
  overflow: hidden;
  left:0;top:0;
}

.landscape {
  position: relative;
  height: 100%;
  background: #db9;
  overflow: hidden;
}

.landscape div {
  position: absolute;
}

.sun {
  left: 50%;
  bottom: 200px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
  box-shadow: 0px -20px 200px #FFFF8C;
}

.land {
  left: 50%;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
}

.l1 {bottom: -1850px;margin-left: -1100px;background: #d0a273}
.l2 {bottom: -1700px;margin-left: -300px;background: #c4884d}
.l3 {bottom: -1900px;margin-left: -800px;background: #a66f37}
.l4 {bottom: -1800px;margin-left: -1700px;background: #80552b}

.windmill {width: 2px;}

.windmill .turbine {
  top: -5px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-animation: 7s rotate infinite linear;
  animation: 7s rotate infinite linear;
}

.windmill .t {
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.windmill.s1 {width: 2px;height: 15px}
.windmill.s1 .t {top: -2px;left: 4px;width: 2px;height: 7px;border-width: 0}

.windmill.s2 {height: 20px;
  -webkit-transform: rotateY(120deg);
  -ms-transform: rotateY(120deg);
  transform: rotateY(120deg)}
.windmill.s2 .t {top: -10px;border-bottom-width: 12px}

.windmill.s3 {height: 35px}
.windmill.s3 .t {top: -18px;border-bottom-width: 20px}

.windmill.s4 {height: 50px}
.windmill.s4 .t {top: -28px;border-bottom-width: 30px}

.l1 .s1 {background: #d0a273}
.l1 .s1 .t {background: #d0a273}
.l2 .s2 {background: #c4884d}
.l2 .s2 .t {border-bottom-color: #c4884d}
.l3 .s3 {background: #a66f37}
.l3 .s3 .t {border-bottom-color: #a66f37}
.l4 .s4 {background: #80552b}
.l4 .s4 .t {border-bottom-color: #80552b}

.s1:nth-child(1) {top: -5px;left: 870px}
.s1:nth-child(2) {top: -12px;left: 970px}
.s1:nth-child(3) {top: -9px;left: 1070px}
.s2:nth-child(1) {top: 125px;left: 485px}
.s2:nth-child(2) {top: 85px;left: 555px}
.s2:nth-child(3) {top: 50px;left: 635px}
.s3:nth-child(1) {top: -10px;left: 780px}
.s3:nth-child(2) {top: -30px;left: 940px}
.s3:nth-child(3) {top: -25px;left: 1120px}
.s4:nth-child(1) {top: -25px;left: 1200px}
.s4:nth-child(2) {top: 28px;left: 1380px}
.s4:nth-child(3) {top: 125px;left: 1560px}

.t1 {-webkit-transform: rotate(0deg);
	transform: rotate(0deg)}
.t2 {-webkit-transform: rotate(120deg);
	transform: rotate(120deg)}
.t3 {-webkit-transform: rotate(240deg);
	transform: rotate(240deg)}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
=================================
						MENU STYLE
=================================
*/
.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 900px;
  border: 2px solid #fff;
}

.menu * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5%;
  min-height: 34px;
  border: 2px solid #fff;
}

.menu .main {border: 0;padding: 0;}
.menu .main:before {color: #468;}
.menu .content:before {color: #fff;}

.header {padding-bottom: 8%;}
.header:before {content: "
";}

.main {}
.main:before {content: "
";}

.content {}
.content:before {content: "
";}

.footer {padding-bottom: 8%;}
.footer:before {content: "
";}



	
	
	


		





		










	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	





	

		

			

				
Heading
Lorem ipsum dolor sit amet, mei doming graecis at, sint debitis expetendis nam
ex, quo ad graeci hendrerit theophrastus. Regione tibique assueverit mea ea, sed eu
quas latine epicurei. Consul nominavi rationibus qui ex, eu illum eirmod vidisse sit.
Ex summo dissentiunt mea. Quot quaeque at eum. In docendi apeirian mel.



Erant sanctus mea eu. Choro exerci gubergren vix an, eum ne enim complectitur, ei
dicam singulis disputationi vis. Sed agam referrentur an, ad eum simul ridens. Ne essent
assueverit signiferumque eam, ad vel ferri mentitum. Case commodo interpretaris pro
id, ad eos graeci blandit, an epicuri suavitate instructior per. Audiam iudicabit sea
no, qui ut nihil veritus. Eu aliquam albucius mea.



Atomorum splendide mei te, minim aliquam inciderint et vis. Mei iusto consul facilis
cu. Ea justo habemus mei. No ignota constituto usu, qui impedit quaestio definiebas ex.



Aeque ubique te eam, putent voluptatibus mel eu, quodsi efficiantur in has. Minim
volutpat sit eu, mutat vidisse ei vel. Quando fabellas vix te. Eu dicam quaestio vim.



Harum nostro eum an, at timeam equidem qui. Cu usu imperdiet voluptatum intellegebat,
qui an quot tantas. Eu pro oratio torquatos, summo omnium quaeque eu eum, usu accusamus
comprehensam ne. Vidit omnes labitur in ius.



Dicat laudem senserit no eos, vel ex mazim viris. Nec ea omnium lobortis quaerendum,
liber adipisci qualisque vis id. Sit quot tibique corrumpit te, qui ferri eirmod fuisset
cu. Te alia mazim mollis his, expetenda intellegebat usu at. Oratio oporteat gloriatur
his ad. Ea inani erroribus cum.



Atqui mundi adipiscing cu qui. Sit cu paulo nihil, iusto nostrum adolescens ad vim,
ei patrioque dissentiet comprehensam nec. Nonumy molestie conceptam cu vel, qui eu
eius adipisci vituperatoribus. Eum labores debitis platonem te. Graeco mnesarchum at
usu, qui ea viderer deseruisse adipiscing, verterem argumentum vis ne. His id ludus
dicam, te vidit zril prompta mea. Eu iriure intellegebat reprehendunt sed, principes
theophrastus ea mei.



Mei tollit consequuntur et. His fugit causae in, eu his facer mazim. Latine vituperatoribus
cu qui, per ad possim aliquip suavitate, wisi ignota iudicabit cum eu. Pri posse equidem
phaedrum ut, usu at iuvaret accusam pertinax. Mel duis ullamcorper ex, ne nam vide
novum latine. Ne hinc inimicus delicatissimi sea, quodsi minimum contentiones ei cum.



An quando fabellas scripserit vel, in quidam democritum usu. Augue possim melius
id mea, vel cu phaedrum laboramus. Illud graeco discere mea ad, commune tacimates cu
mea, an vis accusam tacimates. In ocurreret honestatis nam, quot autem epicurei est
et. Et vis congue equidem docendi, duo ut autem similique. Eam percipitur neglegentur
comprehensam ex.



Mel harum invidunt elaboraret ut, mea probo idque ex, lorem zril definitiones ea
cum. Moderatius intellegam his cu. Per quando equidem et, dicta latine sadipscing pro
ne. Vero vidit insolens sed ne. At velit atomorum cum, dicta eleifend vel eu.
			
		
	














Из-за чего такое может быть?


    

Ответы

Ответ 1

Свойство height: 100% ставьте лишь html, для остальных элементов замените на min-height:
100%. Блок .landskape абсолютно спозиционируйте. А на html поставьте overflow: hidden;
- именно заскролирование html вызывает данный эффект. А чтобы наш контент скролировался
- на body мы поставим overflow: auto;.



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before,
*:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #593c1e;
  overflow: auto;
}

.wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
}
/*
=================================
				BACKGROUND STYLE
=================================
*/
.background {
  min-height: 100%;
  position: fixed;
  width: 100%;
  overflow: hidden;
  left:0;top:0;
}

.landscape {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #db9;
  overflow: hidden;
}

.landscape div {
  position: absolute;
}

.sun {
  left: 50%;
  bottom: 200px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
  box-shadow: 0px -20px 200px #FFFF8C;
}

.land {
  left: 50%;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
}

.l1 {bottom: -1850px;margin-left: -1100px;background: #d0a273}
.l2 {bottom: -1700px;margin-left: -300px;background: #c4884d}
.l3 {bottom: -1900px;margin-left: -800px;background: #a66f37}
.l4 {bottom: -1800px;margin-left: -1700px;background: #80552b}

.windmill {width: 2px;}

.windmill .turbine {
  top: -5px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-animation: 7s rotate infinite linear;
  animation: 7s rotate infinite linear;
}

.windmill .t {
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  -webkit-transform-origin: bottom;
  transform-origin: bottom
}

.windmill.s1 {width: 2px;height: 15px}
.windmill.s1 .t {top: -2px;left: 4px;width: 2px;height: 7px;border-width: 0}

.windmill.s2 {height: 20px;
  -webkit-transform: rotateY(120deg);
  -ms-transform: rotateY(120deg);
  transform: rotateY(120deg)}
.windmill.s2 .t {top: -10px;border-bottom-width: 12px}

.windmill.s3 {height: 35px}
.windmill.s3 .t {top: -18px;border-bottom-width: 20px}

.windmill.s4 {height: 50px}
.windmill.s4 .t {top: -28px;border-bottom-width: 30px}

.l1 .s1 {background: #d0a273}
.l1 .s1 .t {background: #d0a273}
.l2 .s2 {background: #c4884d}
.l2 .s2 .t {border-bottom-color: #c4884d}
.l3 .s3 {background: #a66f37}
.l3 .s3 .t {border-bottom-color: #a66f37}
.l4 .s4 {background: #80552b}
.l4 .s4 .t {border-bottom-color: #80552b}

.s1:nth-child(1) {top: -5px;left: 870px}
.s1:nth-child(2) {top: -12px;left: 970px}
.s1:nth-child(3) {top: -9px;left: 1070px}
.s2:nth-child(1) {top: 125px;left: 485px}
.s2:nth-child(2) {top: 85px;left: 555px}
.s2:nth-child(3) {top: 50px;left: 635px}
.s3:nth-child(1) {top: -10px;left: 780px}
.s3:nth-child(2) {top: -30px;left: 940px}
.s3:nth-child(3) {top: -25px;left: 1120px}
.s4:nth-child(1) {top: -25px;left: 1200px}
.s4:nth-child(2) {top: 28px;left: 1380px}
.s4:nth-child(3) {top: 125px;left: 1560px}

.t1 {-webkit-transform: rotate(0deg);
	transform: rotate(0deg)}
.t2 {-webkit-transform: rotate(120deg);
	transform: rotate(120deg)}
.t3 {-webkit-transform: rotate(240deg);
	transform: rotate(240deg)}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
=================================
						MENU STYLE
=================================
*/
.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 900px;
  border: 2px solid #fff;
}

.menu * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5%;
  min-height: 34px;
  border: 2px solid #fff;
}

.menu .main {border: 0;padding: 0;}
.menu .main:before {color: #468;}
.menu .content:before {color: #fff;}

.header {padding-bottom: 8%;}
.header:before {content: "
";}

.main {}
.main:before {content: "
";}

.content {}
.content:before {content: "
";}

.footer {padding-bottom: 8%;}
.footer:before {content: "
";}



	
	
	


		





		










	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	

	

		

		

			

			

			

		
		
		

		

			

			

			

		
		
		

		

			

			

			

		
		
	





	

		

			

				
Heading
Lorem ipsum dolor sit amet, mei doming graecis at, sint debitis expetendis nam
ex, quo ad graeci hendrerit theophrastus. Regione tibique assueverit mea ea, sed eu
quas latine epicurei. Consul nominavi rationibus qui ex, eu illum eirmod vidisse sit.
Ex summo dissentiunt mea. Quot quaeque at eum. In docendi apeirian mel.



Erant sanctus mea eu. Choro exerci gubergren vix an, eum ne enim complectitur, ei
dicam singulis disputationi vis. Sed agam referrentur an, ad eum simul ridens. Ne essent
assueverit signiferumque eam, ad vel ferri mentitum. Case commodo interpretaris pro
id, ad eos graeci blandit, an epicuri suavitate instructior per. Audiam iudicabit sea
no, qui ut nihil veritus. Eu aliquam albucius mea.



Atomorum splendide mei te, minim aliquam inciderint et vis. Mei iusto consul facilis
cu. Ea justo habemus mei. No ignota constituto usu, qui impedit quaestio definiebas ex.



Aeque ubique te eam, putent voluptatibus mel eu, quodsi efficiantur in has. Minim
volutpat sit eu, mutat vidisse ei vel. Quando fabellas vix te. Eu dicam quaestio vim.



Harum nostro eum an, at timeam equidem qui. Cu usu imperdiet voluptatum intellegebat,
qui an quot tantas. Eu pro oratio torquatos, summo omnium quaeque eu eum, usu accusamus
comprehensam ne. Vidit omnes labitur in ius.



Dicat laudem senserit no eos, vel ex mazim viris. Nec ea omnium lobortis quaerendum,
liber adipisci qualisque vis id. Sit quot tibique corrumpit te, qui ferri eirmod fuisset
cu. Te alia mazim mollis his, expetenda intellegebat usu at. Oratio oporteat gloriatur
his ad. Ea inani erroribus cum.



Atqui mundi adipiscing cu qui. Sit cu paulo nihil, iusto nostrum adolescens ad vim,
ei patrioque dissentiet comprehensam nec. Nonumy molestie conceptam cu vel, qui eu
eius adipisci vituperatoribus. Eum labores debitis platonem te. Graeco mnesarchum at
usu, qui ea viderer deseruisse adipiscing, verterem argumentum vis ne. His id ludus
dicam, te vidit zril prompta mea. Eu iriure intellegebat reprehendunt sed, principes
theophrastus ea mei.



Mei tollit consequuntur et. His fugit causae in, eu his facer mazim. Latine vituperatoribus
cu qui, per ad possim aliquip suavitate, wisi ignota iudicabit cum eu. Pri posse equidem
phaedrum ut, usu at iuvaret accusam pertinax. Mel duis ullamcorper ex, ne nam vide
novum latine. Ne hinc inimicus delicatissimi sea, quodsi minimum contentiones ei cum.



An quando fabellas scripserit vel, in quidam democritum usu. Augue possim melius
id mea, vel cu phaedrum laboramus. Illud graeco discere mea ad, commune tacimates cu
mea, an vis accusam tacimates. In ocurreret honestatis nam, quot autem epicurei est
et. Et vis congue equidem docendi, duo ut autem similique. Eam percipitur neglegentur
comprehensam ex.



Mel harum invidunt elaboraret ut, mea probo idque ex, lorem zril definitiones ea
cum. Moderatius intellegam his cu. Per quando equidem et, dicta latine sadipscing pro
ne. Vero vidit insolens sed ne. At velit atomorum cum, dicta eleifend vel eu.