I've got a problem with a simple webpage. It isn't quite finished but I tried this one with my iPad in Safari and there appeared a vertical scrollbar altough the document shouldn't be higher than the viewport. (only in landscape mode)
In Chrome for iOS and the desktop version (1367x768px) it's running nearly perfect & I don't understand why there's a problem in safari.
This phenomen is only appearing in Safari/iOS/landscape.
Hope it's more or less comprehensible.
Thanks a lot!
Felix
The following style is for the body tag and not the html tag:
height: 100%;
So, remove this style from html, body { height: 100%; ... } and this should solve the issue. Infact you can remove html from that block. It won't affect the output.
Problem is solved in Safari for iOS 8.
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
The luma theme of magento 2 has a bug.
When iam on an iphone and open the menu the menu opens to far.
It streched past the right side of the screen.
If i do this on android the menu works perfectly.
I was looking at the css code and i found that the menu width was calculated using calc();
It substracted 54px from 100%.
I thought iOs couldn't handle calc but this was not the problem.
Then i tried to fiddled with the width of the parent elements to find the calculation problem.
The problem was that none of it fixed the problem.
And even weirder was the fact that on android it kept working correctly.
Does anyone have this problem also with the luma theme?
And possibly found a solution.
Thanks in advance for you help.
On our website https://dampershop.nl we solved this problem by changing a bit of css.
We added:
html.nav-before-open, .nav-before-open body {
overflow: hidden;
position: relative;
height: 100%;
}
This makes it so that iphone/ios devices opens the responsive menu correctly.
I hope this helps!
I'm having an rare behavior in Safari and iOS6. When changing from landscape to portrait, the viewport is resized, but it seems that is no correctly positioned horizontally. It's displaced exactly 128px to left.
I'm able to reproduce this behavior with an iPad3 in iOS6 going to www.google.com
If you change the display property of the html like this:
document.querySelector("html").style.display = "none"
document.querySelector("html").style.display = "block"
the viewport returns to origin and its displayed correctly. That's why I think that this is a bug.
Any ideas how to fix this?
I had noticed a similar issue this morning.
Anytime orientation changed from landscape to portrait, the whole body element would be shifted almost halfway to the left, when it should be 100% width. This was mobile safari in iOS 6, running on an iPhone 4s.
I nailed it down to the full width search bar I had. On the parent element of this bar, I placed a property of overflow: hidden;
This ended up solving my problem. I spent a long time inspecting other sites and this may not fix your issue. For example, my fix didn't seem to take on BestBuy.com which is encountering the same issue as well.
This bug also applies to IOS6 on iPhone.
Removing and reading the placeholder in an orientationchange handler will fix the problem. This solution is jQuery specific:
$(window).on("orientationchange", fixIOS6PlaceholderBug);
function fixIOS6PlaceholderBug () {
var $this,
originalPlaceholder = "";
$(document).find("input[placeholder]").each(function() {
$this = $(this);
originalPlaceholder = $this.attr("placeholder");
$this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
});
}
I found the solution thanks to this:
http://www.tonylea.com/2010/safari-overflow-hidden-problem/
I had overflow:hidden in my HTML tag, since I have some rotating DIVs hidden left and right, but it seems that Safari in iOS6 wasn't accepting that. Setting position:relative to HTML tag solved the problem for me!
I have the same bug, but in my case the reason was a input type=text with width: 100%; and when I changed input wrapper to overflow:hidden bug was fixed;
Solution with overflow:hidden for body is bad for inertial scrolling on iOS
I had to add overflow: hidden to the body tag.
I recently upgraded our mobile application to use JQM 1.1.1, and noticed a very big problem on Blackberry 6 browsers.
The screenshots tell the story best.
In the first image you'll see the search text box rendered correctly.
However in the second image you'll see that when the input text box is focused, it makes the textbox black
Please see my screenshots:
Has anyone seen this issue?
I had the same problem, and fixed it with css like this:
input.ui-focus, textarea.ui-focus {
outline: none;
-webkit-box-shadow: none;
}
Thank you for your answer.
From my side, I had to set css to:
.ui-btn.ui-focus, .ui-input-text.ui-focus, ui-input-search.ui-focus
Hope it will help!