I have a CSS problem that only occurs in Google Chrome. Objects set to overflow: hidden are being 'clipped' at the edges when within a horizontally centred container, and only at
odd browser widths, and only on a high-res display.
HTML:
<html><body>
<div id="container">
<div class="sprite"> </div>
</div>
</body></html>
CSS:
#container
{
margin: 0 auto;
max-width: 800px;
-webkit-transform: translate3d(0px,0px,0px);
}
.sprite
{
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/sprite#2x.png");
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
}
Now, as I resize the width of the window, at odd window widths the sprite gets clipped either side on my retina display. It does not occur on a standard (1 css pixel to 1 display pixel) display.
This apparent rendering bug does not occur in Safari or Firefox. This is on OS X 10.9.3 running Chrome 35.
Edit: It also happens with a pure CSS circle shape, so doesn't seem related to the use of a background image.
My example was too over-simplified so the problem didn't occur standalone.
It turns out that, via a SASS mixin in my full application, I had the following applied to the panel containing the sprite (edit question to include it)
-webkit-transform: translate3d(0px,0px,0px);
This was there to improve CSS performance with hardware acceleration where available (mainly iOS).
Removing this improves the situation slightly, so it seems less likely to 'clip' the shape when resizing the window.
However removing overflow: hidden from the :after element seems to have solved it entirely.
It is worth noting that this 'clipping' side-effect occurs even with a pure CSS circle, it's not related to background-images (thanks #Rohit).
This seems to be a rendering bug rather than something I'm doing wrong.
Hey now you can try this with out image
Css
#container
{
margin: 0 auto;
}
.sprite
{
width: 30px;
height: 30px;
position: relative;
text-align:center;
line-height:30px;
font-weight:bold;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
background:#eecc00;
border-radius:50%;
z-index:-1;
}
HTML
<div id="container">
<div class="sprite">! </div>
</div>
Demo
Related
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
So my problem is with using a css mask to hide a position: fixed; item. Reason being because apparently overflow: hidden; doesn't work. So this actually works swimmingly in all the browsers I've tested it in UNTIL the height of the div containing the mask reaches a specific, seemingly arbitrary, height. ( 1280px on iPad, 2000px in desktop Safari )
I'm totally stumped on this and haven't found anyone with any documentation on this issue. Has anyone worked with css masks at all to maybe have some clues as to why this is the case?
Here's a screencast demoing the bug and the code used to generate it.
https://www.dropbox.com/s/bxzsmkqgll1yeix/Screeny%20Video%20Feb%2010%2C%202014%2C%209.18.28%20PM.mov
And here's a zip with the code used in that demo.
http://cl.ly/Tqy7
Any ideas or proposed solutions?
--- HTML ---
<div class="attn hairline"></div>
<div class="shadow"></div>
<div id="home">
<div class="attn blur"></div>
<div id="content">
<p>Hey, here is some awesome content, stuff you will definitely want to read.</p>
</div>
</div>
--- CSS ---
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
background-color: #f0f0f0;
}
.attn {
position: fixed;
width: 80%;
height: 100%;
left: 50%;
margin-left: -40%;
background: no-repeat center;
background-size: 100% auto;
}
.hairline {
background-image: url(../img/attn.svg);
}
.blur {
background-image: url(../img/blur.png);
}
.shadow {
position: relative;
height: 20px;
margin-bottom: -20px;
box-shadow: 0px -3px 6px rgba(0,0,0,.1);
top: 100%;
}
#home {
position: relative;
top: 100%;
background: #fff;
mask: url(../img/mask.svg);
-webkit-mask: url(../img/mask.svg);
-o-mask: url(../img/mask.svg);
-ms-mask: url(../img/mask.svg);
/* 1281px will kill the mask on iPad, 2001px will kill it on the desktop */
height: 1280px;
}
#content {
padding: 10% 5%;
}
What I ended up doing was setting a max-height attribute on the masked element until that element got to the top of the browser window. I had the fuzzy image text disappearing at this point anyway so it was a good time to, once the image was gone, remove that max-height attribute. Works great, though I'd still love to solve the original problem someday. I'm guessing its a browser quirk though seeing as how it was so arbitrarily consistent.
Due to browser performance implications I can't use box-shadow CSS property because I have many similarly looking elements on my page that should have same looking style including shadow. That's the reason I would like to implement shadows using traditional PNG imagery.
Facts
My elements have predefined and more importantly fixed pixel width
They have fluid height (auto) depending on their content
They have content directly in the element and some child elements will be positioned outside their border
CSS3 can be used but performance-critical parts (gradients, shadows...) should be avoided
CSS pseudo elements can be used without limitation
Requirements
There should be no additional wrapper element added in order to have fluid shadow
Application should run smoothly on mobile browsers - shadows seem to slow down performance significantly on mobile devices since their processing power is much lower than desktop computers.
Possible direction
I thought of using :before and :after pseudos to display top-to-bottom and bottom shadows on the containing element, but these pseudos display within their parent element and positioning parent z-index higher than these children has no effect.
Visual demo of end result
This JSFiddle Demo in pure CSS3 that I would like to achieve but using PNG shadows. In reality there are numerous of these boxes so you can imagine mobile browsers are struggling with all these shadows.
Item is one such box (see blow) that needs PNG shadow. Left menu is child element positioned outside of the box.
Display in Chrome
HTML
<div class="item">
<menu>
<li>Yes</li>
<li>No</li>
<li>Maybe</li>
</menu>
<div class="content">
Some content
</div>
</div>
CSS3 LESS
.item {
position: relative;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 20px 20px calc(20px + 3.5em);
min-height: 5em;
&:first-child {
margin-top: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 5em;
background-color: #fff;
}
menu {
position: absolute;
top: 0;
left: -3.5em;
width: 3.5em;
margin: 0;
border: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
li a {
display: block;
text-align: center;
padding: 2px 0;
}
}
.content {
padding: .75em 1em;
}
}
Probably I am missing something, but looks like you want something in this way:
demo
The CSS is
.base {
width: 300px;
height: 150px;
font-size: 100px;
font-weight: bolder;
background-color: lightgreen;
position: relative;
z-index: auto;
}
.base:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
background-color: green;
z-index: -1;
width: 100%;
height: 100%;
}
.child {
position: absolute;
left: 150px;
top: 50px;
border: solid 1px black;
color: red;
}
And just change the background of the :after to your image.
I have applied this solution to your fiddle.
The relevant CSS is for the before pseudo element:
.item:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-image: url(http://placekitten.com/100/100);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I have used a kitten picture, that is being scaled to cover all the needed size. Just change that to whatever you want.
I needed to do it that way because I had onky a pseudo element available.
The key for that to work (and where you probably had the difficulty) is to add z-index: auto to .item
Updated demo
Well, I had said that it wasn't posible, but I have find a way.
The standard technique would be to use 2 elements, just to avoid stretching the image (as you said). The problem is that we only have 1 pseudo element available.
The solution then would be to use 1 pseudo element, but with 2 backgrounds, to solve the issue.
CSS (only relevant part)
.item:before {
background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
background-repeat: no-repeat;
background-size: 100% 9px, 100% calc(100% - 9px);
background-position: left bottom, left top;
}
We will need an image (the first one) only 10 px in height, to cover the bottom shadow. And another one, with enough height to cover the maximumitem posible, and that will be used for the remaining part of the shadow. The dark part is that we need now a calc() height, with limited support. (anyway, better than border image)
demo 3
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.
I'd like to center an image in a page both vertically and horizontally even when the browser is resized.
Currently, I use this CSS:
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
And this HTML:
<img class="centeredImage" src="images/logo.png">
It centers in FF but not IE (image center is placed at upper left corner). Any ideas?
-Robot
I solved it this way:
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Try using this :
position: absolute
the universal KISS ("keep it simple and stupid") way:
<p style="text-align: center;"> <img src="myImage.png" /></p>
This is a tricky way, but it works:
CSS:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
HTML:
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
text-align:center;
vertical-align:middle;
vertical-align
Should to the trick
If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:
http://andreaslagerkvist.com/jquery/center/
text-align:center;
Should get it, though.
clear: both;
margin: auto;
Solution:
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
}
since you mentioned:
margin-top: -50px;
margin-left: -150px;
And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;
.image {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
I did it! This method is rock solid and works on all major browsers.
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
I have simply used a left of half the width of the image and then shunted it across using margin. Works a treat :)
There is a very simple, cross browser, auto resize method. Taking an image with width of 200px. Take half the width then do the following:
#imgcent1 {
left: calc (100% - 100px / 2 );
/*rest of code*/
}
Make sure there is "white space" to avoid negative and positive numbers (best using this convention for all operands). It will auto resize. Just try it and hopefully, testing on other browsers will ensure that it becomes the standard as intended.
IE has issues with position: fixed (along with a million other things), so I would advise against that if compatibility is important.
Use position: absolute if the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.
text-align: center should work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middle doesn't work for me, even with a large enough container.
Auto margins don't work in IE, at least when I test it.
A single image on the web & responsive
Background Image:
/image.png
CSS:
html, body { height: 100%; margin: 0px; }
.bg-image {
width: 100%;
height: 100%;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
}
HTML:
<body>
<div class="bg-image">Some text not displayed</div>
</body>