Everything works fine on any desktop browsers. Regarding mobile browsers, I’m having a really weird issue with Chrome on iOS only.
First load of the website from the URL bar works well, viewport height is correct. However, if I open the same site from the history or bookmarks, the viewport height is wrong and doesn’t take into account the real viewport.
Here is the basic style css I use:
body, html {
height: 100%;
}
Below part of the code I used before:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #fff;
}
Here is the capture of the first load, there is not scroll bar and height viewport is correct:
Here is the capture on the second load of the page from the history, height is different and the page is scrollable:
Here are the logs, we can see that the height is different from the first load to the second load:
I’m not sure if I’m missing something but I disabled as much as possible my code, cleared the cache of the browser etc. but the issue persist. It happens on various iPhone models too.
Edit 12/20/2020
Here is a similar issue on a react website: https://www.kirupa.com/react/examples/react_router/index.html#/
If open via the link, viewport is correct. Reopening this website from the history, it will have a different height and a scroll bar will appear.
Thanks!
Try using
margin:0;
padding:0;
box-sizing:border-box;
}
And remove the display for html.
Related
So, I have been trying to implement a landing page for mobile view that you can see here : https://i.imgur.com/4Ju5XGs.png
It works fine so far.
But as soon as the user wants to introduce his username and password, the keyboard from Android appears and my problem appears as you can see here : https://i.imgur.com/uT4LKrQ.png
My elements (the logo and the form) are placed via absolute position to keep the layout in place whatever the screen size is. I suspect this is my main issue.
Here is a really really quick pen to showcase what the problem is all about : https://codepen.io/Gallow/full/BeLWVG ( https://codepen.io/Gallow/pen/BeLWVG to see the quick code )
In order to make the android keyboard appear, you have to enable Toogle Device Toolbar from the chrome debug menu, then click to choose a device and click edit.
From there, a list will open and check Nexus 5X.
The procedure is described here : How to bring up mobile keyboard in chrome dev tools?
To toggle the keyboard, just click on the screen options (to change orientation) and pick Portrait - Keyboard
I think this might be the code in cause : (you can see the same code in the pen as well)
.logo
{
position : absolute;
z-index: 100;
width: 80%;
left: 10%;
top: 7.5%;
}
.container__action
{
position: absolute;
z-index: 100;
bottom: 5%;
width: 80%;
left : 10%;
text-align: center;
}
As you can see, everything is placed via absolute. As the keyboard appear, the size of the body decrease dramatically which cause the form to move up and place himself in front of the logo.
I can't find a proper way to apply this layout without using absolute to place the element, while making it works when the keyboard lower the size of the body.
Thanks a lot !
My suggestion would be to divide your CSS into two sections, one below very square-ish aspect ratio (like 1:1, you have to see what resolution you get on what aspect ratios) and set logo's display to none (that is pretty common solution while keyboard is visible).
If you don't know how to do this, see read here about #media query.
Another option (if you don't want to use #media query) is to listen for input's focus and blur events (focus means that input is selected, blur means that it is no longer selected) and toggle logo using javascript.
I'm working on a design that uses a parallax effect on the splash page. In order to prolong the effect I've given the necessary elements a height of 200vh, which works great in Chrome and Fire/Waterfox. However, in Microsoft Edge the image is immediately resized as soon as the window is scrolled, which given the content is an issue. It should be noted that if I change the height of the element to 100vh, the image is not resized upon scrolling and the issue disappears. But, as mentioned earlier, my intention is to prolong the parallax effect. Below is the relevant code.
CSS
#castle {
height: 200vh;
width: 100vw;
background: url('image.svg') no-repeat fixed top;
background-size: cover;
}
Screenshots of before and after scroll, respectively.
It really perplexes me that the image is perfectly fine when the document loads, that its scale is only distorted upon scrolling.
Does anybody know a workaround or what might be causing this issue in the first place?
Any help would be appreciated immensely!
I am working on a responsive design that includes iFrames to load Wordpress blogs. The page loads flawlessly on all browsers but native iOS Safari, but they do not load at all in Safari. Co-workers with iPhones suggest they load but don't scroll, which I understand is a simple meta change, but my testbed device (an iPod touch) won't load them even after a firmware update to iOS6 (and I therefore have to design as though iFrames do not load at all). Among the best alternative suggestions I read was to load content into a div.
The content loads into a div nicely. The challenge now is that the divs won't resize, and resizing dynamically is a requirement of the page (the page has a jQuery slideUp header, and content adjusts as it slides). So the iFrame resizes but does not load in iOS, and the div loads but won't resize in any browser. Here is the thoroughly hacked code:
HTML
<div id="iFrame1"></div>
CSS
#iFrame1 {
position:absolute; /* because I am trying everything */
display:block; /* Yes, divs are block inherently, this is hacked code */
float: left; /* there are two iframe divs */
overflow-y: auto;
height: 1px;
width: 45%;
}
JavaScript
function resizeIFrames(){
document.getElementById('iFrame1').style.height = document.getElementById("content").clientHeight - 150 + "px";
document.getElementById('iFrame1').style.minHeight = document.getElementById("content").clientHeight - 150 + "px";}
I am open to all recommendations that are cross-browser compliant. I will use iFrames, divs, tables, whatever. Guide me and I will listen.
How do you disable horizontal scrolling on a webpage?
I understand that this question has been asked many times before on stackoverflow (here, for example).
The most common answer says use CSS to set overflow-x: hidden; or max-width:100% for the html/body elements. However, these seem to hide the scrollbar but still allow the user to scroll with middle clicks, trackpad swiping, and touchscreen swiping. I'm looking for a solution that allows NO horizontal scrolling of any form.
The next most common answer says don't make your content wider than the screen. Maybe this is a good answer, but in general it's not very helpful and in my particular situation I don't know how to make my content fit.
Are there better methods for preventing horizontal scrolling?
To give you an idea of the problem that's motivating my question, take a look at http://www.tedsanders.com/BetTheBill/. So that you can see the problem better, I have highlighted the offending svg element in gray. When you click the green 'Bet The Bill' button, the svg rotates. If your window is small, the corners of the gray rectangle sometimes end up pointing off the screen and make horizontal scrolling possible.
I've tested this issue on the current versions of Chrome, Android Chrome, Firefox, and IE11. Only IE11 gives the behavior I want, with no horizontal scrolling.
Edit: Thanks to your helpful answers, I now have a solution. I'm going to implement it soon, but unfortunately that means my link above, originally meant to illustrate the problem, will no longer illustrate the problem. Sorry to all future visitors! (Perhaps in hindsight I should have made a fiddle. Although who knows how long that will even last...)
Edit2: Beware, the javascript solution below does not necessarily work on mobile browsers (in my version of Android Chrome there is significant jitter).
Edit3: Aha! My friend told me that overflow: hidden; will indeed work, but it needs to applied to the parent div and not the body or html or another ancestor. This looks like the best solution!
Try this:
html {
overflow-x: hidden;
width: 100%;
}
body {
overflow-x: hidden;
width: 100%
}
I believe overflow-x: hidden; will only stop the particular element that it is applied to from scrolling, so outer-more elements can still cause the window to scroll. Applying it to html and body should prevent anything which exceeds the width and height of window from causing the window to scroll.
Adding width: 100%; will force the html and body tags to be exactly 100% the width of the window.
But in your example that's not the problem. For some reason the <div class="container"> sometimes displays another set of scrollbars just for the container and the scrollbars appearing and disappearing is what causes the container's movement.
You can fix it by adding to following:
/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
overflow: hidden;
width: 930px;
padding-left: 150px;
padding-right: 150px;
}
var offset = window.pageXOffset;
$(window).scroll(function () {
if(offset != window.pageXOffset)
window.scrollTo(0, window.pageYOffset);
});
Also do not forget to hide overflow.
Aha! My friend gave me an answer so I came back here to post it for all of you. overflow: hidden; will indeed work, if it is applied to the parent div and not the body or html or another ancestor. And unlike the javascript solution kindly provided by user3796431, it even works on mobile.
Here's the site:
http://philly.thedrinknation.com/mobile
On smartphones, the screen is too wide - allowing you to scroll to the right a little bit, rather than being exact fit.
On a desktop you can reproduce this in FF, make your browser about 350 px wide, then use the keyboard arrows to scroll right.
I have narrowed this down to the javascript from sharethis:
http://w.sharethis.com/button/buttons.js
If I take out that call, the page is fine. Add it back in (even on pages not using the widget), and the scrolling comes back.
It looks like they modified their code back in March, and I'm guessing that might be related. I asked them about it, but so far no response.
Can anyone give me pointers on debugging this further? I will copy the .js file locally to edit it if need be, but so far I can't see what is causing the problem.
Strictly speaking, your issue isn't caused by javascript. Rather, it's caused by styles that AddThis is using. The #stwrapper element used by AddThis has an explicit width of 354px that is causing your issue. The problem is caused by this css coming in an AddThis stylesheet (hosted by them):
.stwrapper {
position: absolute;
width: 354px; /* This is causing the issue. The width of this element ensures that the page can never be smaller than 354px */
z-index: 1000000;
margin: 0;
padding: 0;
top: 0;
left: 0;
visibility: hidden;
height: auto;
}
As this stylesheet is coming from AddThis and you don't have control over it, you need to override the styles in your own stylesheet while ensuring that AddThis still works as intended.
I can't see where you're actually using AddThis, so it's hard for me to suggest what style adjustment you should make that will fix the width issue and keep AddThis working, but something like the following would be a good start:
.stwrapper {
width:auto;
}