i am trying to put few images on top of another image, and then i am fading in and out those images on top, here's my css:
#spark1 {
bottom: 211px;
left: 252px;
position: relative;
width: 75px;
}
#spark2 {
bottom: 100px;
left: 286px;
position: relative;
width: 50px;
}
my HTML:
<div id="spark1">
<img src="clientside/images/big_sparkle.png" />
</div>
<div id="spark2">
<img src="clientside/images/little_sparkle.png" />
</div>
my fade effect (in case this has anything to do with the problem i am facing)
$(function(){
setInterval(function() {
$('#spark1').fadeOut(800).fadeIn(800);
$('#spark2').fadeOut(1000).fadeIn(1000);
}, 2000);
});
Everything looks good on firefox and chrome, however on IE 8 (havent tested on any earlier versions of IE), the sparkle images is having a wrong positioning and it has a black background instead of transparent, how can i handle this ?? thanks
Regards
Update:
i have tried few css workaround, but nothing seems to work (probably because i am applying it the wrong way :p), but finally i have found a slight convenient solution, i put this line after my jquery fade effect:
$("#spark1").css('filter', 'none');
and this css to my img:
#spark1 img{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; IE8
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); IE6 & 7 */
zoom: 1;
}
thanks for pekka for pointing me out to those articles, i think i am going to stick on to this solution for now
If your PNGs have alpha transparency, there is in fact a bug that persists even in IE8: Images with alpha transparency cannot be made transparent (= given a opacity value other than 1).
See this question for background info and workarounds.
Related
Setup & Goal
I am trying to apply a texture to all the content on my page. The aim is to make the site look like a piece of printed paper.
In order to achieve that, I am using an absolutely positioned div with the same dimensions as my content. It has an image as background and user-interaction is disabled. I use the mix-blend-mode: multiply to apply the texture to everything behind.
The set up looks something like this; however I was unable to reproduce the issue in the snippet editor:
.main-content {
position:relative;
width: 500px;
height: 500px;
background-color:lightblue;
border: solid 10px red;
}
.texture {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: -10px;
mix-blend-mode: multiply;
user-select: none;
pointer-events: none;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAZoAMABAAAAAEAAAAZAAAAANoMEmUAAALiaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjU8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjI1PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Ch9KojkAAAN+SURBVEgNTdVpctswDAVgipGX2E6cNLn/ofqnPUXGS7wvKj626JgzNEXg4eEBpOTu18/fQ9d15fv7u1ifnp7KZDJpczwel+PxWC6XS+n7vtRayzAMZRtYvtVmXebzedntdg2zWCwa5nw+F+Pj46PF19vtVvb7feGQYDQaNSLPyK1fX19ls9mU6XTacBJJfr1eW/KXl5cigVhCcBr3+72cTqfSU/E4gKhUFTLDKgApMfaESWSqJquW4Pn5uSXjg++RIM42IZcdqRZ5RkIlQRJJDZdkh8PhfzvFGMglxF0ZBZgSIRf0qDTBKjARwOfZeU4MPm1mw9XsTVkE2iAHoBqRRCpZrVatLbPZ7G/bAuMMLqdzOe4PpYvSrudLOez2pZauLGbzMtzuzQdTJTGQy6w1EugxW6rKnsNowT1EaZ+WfX5+NpHi8KkC3lRZZdAm6pVv5XSlDYrf398biT2/6VB/hH0Cu92WG/LwX0OYdRTk0+DbBU8vgBoKXVGZJdM6NiJyr4LcexZnL6FBrErstXYbydvBZxLqnQsAcqDWlng2kOVlgH17e2v4fAUIZHcxnCEu3K+vr6WXHQGjnhoteygVpIoMkMSzGKvzYkuhbNRLzO4llbQCZACDhGzaJomqBPHZs7tx6/W6CbA3+PDAijHh8PVU59XVIioNK5DqMkhLEGVF8HkuYvIcVS+5tnluV1h2ZBySakNWR8lyuWz2x7bC+1B2gZ/Ftb/EgZ/CNg7STEyoM65+BMuoTalcIsoFaJVnSvmNUbQHSd4iHK47nmtU2zDBpwvVBomNICQC7A2rtpmeW7WBU+l4GpdiiE9HzHjjyj2+akO8JHg2cQGIxl0ZTMoRZUIHSZkvQPr5KDUlMXVCrOSqtsJJwGdUBiRWRk7/HarJM+JDaDWyWqszhG2V/WthcqbolgRQzyXwLFhrKExCvkzKrsI8Bz5X2tsuXqWEZrU1774knIa3WRKKEDhcayqElQRh4ogx8MGyZ6L2MgJTmV9kJFkJm3bCPCpNbH5IxajMdAvhVSxpRWZyphoKOO19JpStSuodLh9MElEuCbxzkNi75+vt8rRKgCRBAogEiFq+rFTb0g5LsQ6wmRLAaivh/HgrRdRR6nZxegagDolKBOdgg2FDLkZrrLDOlN/np7U4b0C2ipMj9wJzOhtfVpXC5PuTAqhGDM+X5/wHWO18ZrEZ4QIAAAAASUVORK5CYII=')
}
<div class="main-content">
Lorem Ipsum
<div class="texture"></div>
</div>
Issues
This works fine on initial load in all browsers where mix-blend-mode is enabled. https://caniuse.com/mdn-css_properties_mix-blend-mode
Issues arise however in:
Safari (OSX)
Safari (iOS)
Whenever the zoom functionality of the browser is used, either through pinch or automatically through activation of an input field, the Browser seems to "forget" that the mix-blend-mode property is set on the element and shows it fully opaque in front of all content.
Zooming back out does not solve the issue.
Disabling and re-enabling the mix-blend-mode property manually through the developer tools does solve the issue.
Is this a known bug in Safari? Are there any known workarounds for this issue?
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I'm a bit confused. I try to resize an image using CSS. While in Safari and Chrome the image resizes, in IE and Firefox it keeps it's original size but crops. What do I need to change to have it resized in FF and IE as well?
CSS looks as follows:
body {
background-color:black;
width: 100%;
height: 100%;
}
#image1 {
background-image: url(img/myimage.png);
background-size: 100% 100%;
position: absolute;
width: 532px;
height: 250px;
top: 100px;
left: 100px;
}
and the body:
<body> <div id='image1'></div> </body>
I've also tried your code in Firefox (17.0.1 -- OSX).
With and without
<!DOCTYPE html>
the image actually resizes as expected.
You sould check for typos in your CSS I guess.
I think you're missing a % or px in
background-size: 100% 100;
I've tested this jsfiddle in Chrome, IE, and Firefox with good results. I also added no-repeat in case there is a need to scale smaller images up.
Try making the background position fixed, and then add this to your html.
<img src="img/myimage.png" alt="background image" id="image1" />
Dear all, is there a way to scroll, as in relatively shift the contents of, an element without using javascript, and only using CSS?
If that matters, the element in question has overflow:hidden and white-space: nowrap to make it 'hide' some parts of its content. The element is normally scrollable with javascript, but needs to be properly shifted upon initial rendering (and without further interactive scrolling, of course) in case javascript is disabled.
No, there is no way to scroll items on a page (unless it's an iframe with the hash portion of the url included, in which case the browser will control the initial positioning of the scroll, not css or html) using only CSS and HTML.
No. Not with CSS directly.
You could simulate it, by wrapping the contents with a div and giving it a margin-top value for the amount of scrolling you want.
(remember to remove it/set it to 0 with javascript when it is enabled)
update
A cool idea is what Jamie, mentions in his answer, if it fits your requirements.
update 2
Here is another solution i created out of Jamie's idea, that needs no frames.
Put an anchor <a name="anchor_name">..</a> at the place you want the scrolling to be and use a
<meta http-equiv="refresh" content="2;url=#anchor_name_here">
to auto-scroll there. (the meta element should go in the head though for (x)html conformance)
example at http://www.jsfiddle.net/gaby/f3CVY/5/
works great in all browsers i tested it (IE, Chrome, FF, Opera, Safari)
There is also another method - which is quite hacky - but it works without a reload.
The solution I've created works in the following browsers:
Firefox 4+
Safari 5+
Chrome 6+
Opera 11+
IE 10+
Android 2.3+
It's really a bit hacky, so see whether you would use it or not. :)
A little explanation
I used the HTML5 attribute autofocs on an <input>-field. As this will focus the input, it has to get it into the viewport. Therefor it will scroll to the given position. To get rid of the highlighted outline and to not see the input at all, you have to set some styles. But this still forced Safari to have one blinking pixel, so I did the trick with the span, that acts like an overlay. Note that you can't simply use display: none as this won't trigger the autofocus (only tested this in Safari).
Demo
Try before buy
The demo will run in Safari and Chrome only. IE and Firefox seem to not fire autofocus in an <iframe>.
CSS
div.outer {
height: 100px;
width: 100px;
overflow: auto;
}
div.inner {
position: relative;
height: 500px;
width: 500px;
}
div.inner > input {
width: 1px;
height:1px;
position: absolute;
z-index: 0;
top: 300px;
left: 200px;
border:0;
outline:0;
}
div.inner > span {
width: 1px;
height:1px;
position: absolute;
z-index: 1;
top: 300px;
left: 200px;
background: white;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" autofocus></input>
<span></span>
</div>
</div>
I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.
Here is HTML:
<html>
<head></head>
<body>
<div id="demo"></div>
</body>
</html>
Here is CSS:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
Run it in IE and see the result that looks like image here: link text
Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
filter: alpha(opacity=50);
}
Notice that opacity filter works but the triangle at the bottom of the div disappeared.
The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")
Does anybody know why this is happening, and how to get around it?
Thanks.
An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.
The problem is that IE Visual Filters (like the alpha one you are using) were developed before :after and :before were implemented in IE.
You should wrap the #demo div with another div container, and put the opacity on that (making sure the container div has layout).
Alas, it is the only way to do ti