I have a strange behavior on Chrome browser (v 95.0.4638.50) on iPad (iPadOS 15.0).
I have a first website (let's call it "A") and a second website (called "B"). A has a link to B which will open in a new tab.
The issue is that when B opens in a new tab, it looks like the viewport is bigger than the iPad's screen because my footer (which is position: fixed and bottom: 0) is below the visible part and I have to scroll to see it.
Fun facts about this:
if I go back to the first tab (A) and returns to the second one (B), everything goes back to normal
I tested with Safari, Firefox and even Edge and the bug only appears in Chrome
Here is how my page is displayed after first load:
Then if I scroll a bit, I reach the bottom of the page and I finally see the footer:
And when I switch tabs and come back, everything is back to normal:
Do you know any way to tell Chrome to resize the page correctly ?
Option 1: Try modifying height like so
height: calc(100vh - 65px); 65px
Or Option 2: try this Option 2 with -webkit-fill-available
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
There was a tweet on this
Related
I have a centered website with a set width.
Here is the current CSS for the content:
.page-content {
max-width: 1022px;
margin: 0 auto;
}
Originally the max width was 1200px but then I changed it to 1022px. After I changed the width of my website the scrollbar began to lag ONLY in safari. But when I change the max-width back to 1200px it works normally. The content itself does not lag but the scrollbar lags. It takes a second for the scrollbar to catch up with the new scroll position. Has anyone else experienced this issue? What should I do? This seems to be purely a CSS and HTML issue.
thats sounds like safari bug, because as you said.. it's working great in every other browser.
I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.
If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.
Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.
I have tried this CSS from research:
.highcharts-container {
width:100% !important;
height:100% !important;
}
But this screws up the tooltip on Chrome and other browsers too.
Any sugegstions welcome.
in addition to your rest of css apply max-width: 100%; to your div like below
.highcharts-container {
max-width:100%;
}
When the soft keyboard is opened in android the viewport is automatically resized to fit the screen (device height - keyboard height). In iOS7 the viewport is simply pushed up (the top half just doesn't get displayed).
While it might be the desired behavior for some apps, it doesn't work well for me - the top nav bar gets hidden, and my content is a scrollable div - I want the user to be able to scroll all the way up.
Resizing the body manual when the keyboard opens/closes results in jittery behavour
Any idea how to solve this?
I was having exactly the same requirement. The solution was a mix of reducing body height when the keyboard is shown and fixing the shifting of the content area. This is how the code would look like using jQuery:
$(document).on("focus", "input, textarea", function() {
$(‘html’).addClass("keyboard");
setTimeout(function() {
window.scrollTo(0,0);
document.body.scrollTop = 0;
}, 0);
});
$(document).on("blur", "input, textarea", function() {
$(‘html’).removeClass("keyboard");
});
And the corresponding CSS:
body {
position: absolute;
top: 0;
bottom: 0;
}
.keyboard body {
bottom: 240px; /* exemplarily value */
}
The bottom value needs to be adjusted to match the correct keyboard height on iPhone portrait, iPhone landscape, iPad portrait and iPad landscape.
I havn't tested this code in a while, so maybe you could check whether this works for you without any flickering? If I remember correctly I had slight flickering in Mobile Safari, but it worked fine within the native WebView.
I'm working on a school project, and I have to create a simple presentation webpage. The problem is that the webpage doesn't work as expected in Firefox, while in Chrome and othet WebKit browser it's all fine.
My problem is here: http://c303.usv.ro/~HPC/ (please don't change the language in English, as you will not be able to see my problem). If you go to "Echipamente" in Chrome, you'll see that the "#content" div has some nice scrollbarls and the footer stays at the bottom. If you'll do that in Firefox, the scrollbars no longer appears and the footer seems to go somewhere under the visible part of the webpage. As a workaround I use:
function mozillaFix(){
return; // we shouldn't use this
$('#content').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
$('#leftmenu').height($('#maindiv').height() - $('#topheader').height() - $('#copynote').height() - 40)
}
but I guess that this is not the mos elegant solution. Where could be the issue?
Set the max-height with Javascript to the desired height (I tested it with FireBug to with max-height: 400px;). Then, Firefox will make a nice scrollbar, and show the footer as you wanted.
As found on the internet, the solution is defining the height of the container of the div. If you have the following CSS it should work:
html, body {
height: 100%;
}
This is a really weird bug. When I load my website in google chrome the first time I view it the images are squished but after I refresh the page it becomes unsquished. This will only happen the first time loading the page.
http://dotacommentaries.com
please load it in google chrome and tell me why the bars are squished.
How do I make these bars unsquished?
http://imageshack.us/f/24/squishedbars.jpg/
I think the 100% width value for the images is screwing it up somehow. Try either removing the width value from this css rule:
a.auserbars img {
line-height: 0;
text-decoration: none;
width: 100%;
}
or explicitly set it to match the images (310x37).