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

Страница не корректно отображается в некоторых мобильных браузерах (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.

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

Ответ

Свойство 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.