So I want a page that's nothing but a square image which scales up to the height of the window. Fine, great, I do:
img
{
max-height:100%;
height:100%;
width:auto;
}
and stick an in a center-aligned div. Firefox loves it, but insists on the height:100%. Chrome doesn't need that, but adds a little bit of height to the page and so a scrollbar pops up. The whole page itself is still rendering identically down to the last pixel, but Chrome seems to think its window is a little heightier than it actually is. What's going on?
Check the margin and padding on the html and body elements -- often a hidden source of pain!
Yes, I know this was in my comment, but this way the question looks answered :-)
Related
This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/
We have a simple modal in our web application.
It's nothing special and is built on twitters bootstrap library.
It contains a backdrop that is a semi transparent white background with position: fixed and width and height set to 100%.
The modal itself, however, is not statically positioned but absolutely positioned, this is because the modal might be taller than the viewport and we don't want scrolling in the modal.
Here's the dilemma, when the backdrop is present the scrolling is far from smooth in Google Chrome, if I change the position of the backdrop to absolute everything is fine.
This has the obvious downside of not covering the entire page.
I tried to reproduce it with a JSFiddle but I couldn't (most likely due to the fact that we a lot more content on our site).
Nonetheless here is my attempt: http://jsfiddle.net/LdC4w/
So, any ideas?
Oh, and I can add that having a background image instead of opacity is not an option.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.
In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.