So here's the problem. I've set a background image that resizes until a minimun height is reached. At least this is how it behaves in Firefox, Chrome and IE.
body {
min-height: 790px;
min-width: 640px;
overflow: auto;
}
#main {
float: left;
width: 100%;
height: 100%;
background: url(../images/index_bg.jpg) no-repeat center center;
background-size: auto 100%;
}
But in Safari, if I continue making my navigator's window's height smaller than 790px, the background image continues resizing. When my idea is that it should stop at 790px as it does in other navigators. Vertical scroll does appear but of course this is not much help when the background continues resizing.
If you want to check out the whole page for its code, here it is:
http://www.avalon.me/313/
I suggest also setting the min height value of #main. This worked for me in all browsers.
#main{ min-height:790px; }
Related
I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.
It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.
.alignfull {
left: 50%;
max-width: none;
position: relative;
transform: translate(-50%);
width: 100vw;
}
.background {
background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
height: 400px;
width: 100%;
}
<div class="alignfull">
<div class="background">
Test
</div>
</div>
I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.
Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?
Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}