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.
Related
I am building one website and I have a weird gap on the right size of the screen.
This gap appears only at mobile view and with portrait view (with landscape everything seems to be OK). Width of body and html is set to 100% with margin and padding set to 0. I figured out that the real width of the body should be 105vw, but is this true for all devices?
Any way how to clearly solve it?
Site: http://valkovic.eu:8080/JanWilliamDrnek/
I could reproduce the first time but not the second maybe you are adjusting as I looked.
it seemed that the logo was pushing out over the body
.title img { margin: 2em auto;} in the css fixed the issue for me.
Unsure about the 105vw unless you are trying to hide something offscreen the max value should be 100vw.
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%;
}
I have a website that is using a div to display a background image across the screen, I have nothing in the div, but I am specifying a height.
My code looks like:
<div id="nav">
<!-- -->
</div>
My css looks like:
/* Navigation */
#nav {
background: url("images/bgnav.png") repeat-x;
height: 116px;
position: relative;
z-index: 1;
}
what I don't understand is the fact that in Safari and FireFox the background image spans the width of my browser, but in IE8 it stops after about 1000px or so and it's not in another div...it's all by itself and there is no other code than what I posted. It'll go longer if I specify a width in pixels, but if I don't specify a width or if the width is in a percentage like 100% it doesn't work. I also tried to set a min-width to the width of the image, but that didn't work either.
Any ideas...this seems to only affect IE8. I tested on multiple machines that are both running IE8 and they both have the same issue, so there is no browser cache going on here.
Thanks,
Josh
I took #Zaf Khan's advice and reworked my website to be compliant with a smaller screen resolution. I did like the original code, but I'm glad I changed it because I have optimized it for more screen sizes :-) and even though it looks a little different than before it functions much better!
Thanks,
Josh
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}