0

I want to display website of mobile without sudden changes of position when user change direction of scrolling.

The problem occurs when user of mobile device scroll down and up. Then height of view is changed because of browser shows menu. In consequence user instant see other fragment of website that before.

I present sample of code:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
    <style>
        p { padding-top: 6vh; }
    </style>
</head>
<body>

<!-- some paragraphs -->

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas ornare risus a efficitur. Nulla laoreet sagittis magna sed facilisis.</p>
    <p> Aliquam nec enim porta, condimentum nibh et, posuere sapien. Sed id consectetur erat. Cras malesuada turpis ut iaculis feugiat. </p>
    ...
    <p>Donec ac enim hendrerit, placerat leo aliquam, mollis mauris. Proin vitae purus ligula. Ut lectus arcu, ullamcorper et feugiat ut, feugiat ut orci. </p>
    <p>Phasellus augue eros, vestibulum pharetra tempus id, tristique ullamcorper urna. Donec sed augue commodo, placerat quam a, scelerisque dui.</p>
</section>

</body>
</html>
  • All code is available *

On fiddle:

http://jsfiddle.net/j2d59xbu

Version with meta tag to test on mobile browser:

http://test.sekretszczescia.pl/test.html

And list of solutions that failed:

  • viewport-units-buggyfill - after cloning repository and start example vh changes when bottom menu shows.
  • heigth: -webkit-calc(100% - 0px); - it works on mobile quite good, but in computer work completely differ than vh
  • jQuery - second source - in this method I have to locate any element with heigth that use vh unit

Sources:

How to fix vh(viewport unit) css in mobile Safari?

vh / % units and keyboard on mobile devices

Is there any method to apply great vh on mobile without problems like this?

Community
  • 1
  • 1
Daniel
  • 7,684
  • 7
  • 52
  • 76
  • JSFiddle please. And if you mean that, when scrolling, by hiding the browser tab, the sizes of elements with vh or vw change, yes. That's usually going to happen. To answer your question: no. not that I know of.. See bootstrap, though. –  Nov 12 '16 at 18:28
  • JsFiddle shows simplify situation https://jsfiddle.net/0fgkspyy/ so, I attach link to test version of real website where problem is greater and easy to show http://test.sekretszczescia.pl – Daniel Nov 12 '16 at 19:31
  • If jsfiddle is different it means you didn't add everything your website is using. That can be CSS, HTML, or JS. –  Nov 12 '16 at 19:45
  • I simplified jsfiddle for the sake of clarity. On test website there is a lot of elements that have different paddings in "vh" units. I looking for method of set constant ratio between vh and pixels when page is scrolled and menu or address bar is showing and hiding. – Daniel Nov 12 '16 at 20:59
  • So: 1. put **everything** in jsfiddle. 2. Remove some code, 3. if the problem still occurs and is reproducible, remove more (step 2, 3). 4. Till it's not. So we can look at the least code possible, but yet see the problem. See [mcve] and [ask] for more info. –  Nov 12 '16 at 21:23
  • I prepared my website to form with images from http://placehold.it, and no JavaScript. One of images is red to give point of reference. https://jsfiddle.net/j2d59xbu/ because of problem is on mobile, on address http://test.sekretszczescia.pl/test.html there is the same example like on JSFiddle, but with Thank you very much for effort. There is quite a lot of code, but important are only css with vh. – Daniel Nov 12 '16 at 22:39
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127969/discussion-between-alldani-com-and-daniel). –  Nov 12 '16 at 22:43

1 Answers1

0

Finally I used jQuery to fix vh units, as it was mentioned in source 2 and there.

CSS: Are view height (vh) and view width (vw) units widely supported?

Community
  • 1
  • 1
Daniel
  • 7,684
  • 7
  • 52
  • 76