I have an HTML page where I need to render 3 images, one on top of each other.
<div id="preview">
<img src="transparent-image">
</div>
with the following CSS
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
The fist 2 images gets blended together using the CSS property background-blend-mode: multiply, on top of this I put the last image (transparent-image) with a transparent background (Imagine a photo of a room, with the wall area being transparent).
The result is exactly what I want but when I try to put
#preview{
width:100%
}
to make it responsive; It works flawlessly, but on ios the transparency is lost.
I tested this behaviour on Chrome, Safari and Firefox (iOS). No problem at all on Chrome, Safari, Firefox on OSX, Android, Windows.
Is there something I'm missing? Thanks for your time.
EDIT:
layer0-image and transparent-image are the same image, layer0-image has no transparency and gets multiplied with layer1-image then on top of this blended image I put transparent-image.
I tried to change transparent-image with another one, the problem seems to be the blending between layer0-image and layer1-image, but due to the fact that layer0-image and transparent-image are the same, at first I thought there was a transparency problem.
The transparency is there, but the div #preview has 0px height when put to
#preview{
width:100%;
height:auto;
}
Showing no blending.
EDIT2:
I'm adding an example to show and replicate the error: https://jsfiddle.net/dyqnghdo/3/
Ok, I finally found the problem. Having:
#preview{
background-image:url(layer0-image), url(layer1-image);
background-size:100%, 100px;
background-blend-mode: multiply;
width: 820px;
height: 350px;
}
and then setting:
#preview{
width:100%;
}
casused the error. To fix it I tried setting:
#preview{
width:100%;
background-size:cover, 100px;
}
The problem is gone even if it's not clear to me why it was happening.
Related
Is there a way to disable background smoothing in Safari?
I'm trying to make, for example, the tiled background like this:
div#dashed
{
width: 10rem;
height: 7rem;
border: 1px solid #000;
background: url("https://tut.etogo.net/_files/diagonalbg.png");
}
<div id="dashed">
So, the background is like that:
And I expect the background to look like that (zoomed):
But in Safari it looks like that:
Zoomed:
So, I see Safari does some antialiasing/smoothing on the edges - is there a way to disable it? I tried different "image-rendering" parameters but with no success. Tried that in IE, Edge, FF, Chrome and Opera - everything renders fine, but not in Safari. maybe there's some css for that?
As an alternative to using an image, you can achieve the same effect with pure CSS.
.gradient {
width: 200px;
height: 200px;
background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}
<div class="gradient"></div>
You might want to fiddle around to reach the desired outcome.
A bit more info, and tips can be found on https://css-tricks.com/stripes-css/
I think this is because your background was repeat.
You can try it
background-size:cover;
background-repeat: no-repeat;
Setting size for your background-image.
I am using the CSS cursor property with custom images specified with URLs.
However, when doing this on Chrome, white dots appear around the cursor image.
If we look at the image below, you can see the problem on google chrome.
This does not happen on other browsers. Such as firefox:
Here is the link to the cursor images used:
http://imgur.com/a/dooCC
I thought originally that the issue would be that semi-transparency is used in the image. But the image has no semi-transparency at all.
What is going on here, and how would I fix something like this?
Thanks.
I tried to reproduce this example using Chrome 52.0 on Mac OS X 10.11, but I am not seeing the jagged white edges. Does this snippet show the jagged white edges for you?
.cursor-test {
height: 200px;
width: 100%;
}
#cursor-test-1 {
background-color: red;
cursor: url('http://i.imgur.com/jaYSPxo.png'), auto;
}
#cursor-test-2 {
background-color: blue;
cursor: url('http://i.imgur.com/aFU13SN.png'), auto;
}
<div id="cursor-test-1" class="cursor-test"></div>
<div id="cursor-test-2" class="cursor-test"></div>
Update: Here's an animated gif screenshot of how it looks for me. I attempted to capture a regular screenshot, but OS X seems to hide custom CSS cursors in screenshots.
I'm using a div to create a circle, to act as a period at the end of my headings.
This period/div worked fine for Safari, IE, Chrome and also FF just up until some weeks ago.
I can't remember any changes I've done, besides increasing the heading's font size, which made the period loose it's correct position. After correcting this, it's now suddenly approx 10-20 pixels below the right position in FF 17.0.4, but in correct position for IE, Safari and Chrome.
The period looks like this; (CSS)
width: 15px;
height: 15px;
background-color: rgb(252, 193, 54);
border-radius: 25px 25px 25px 25px;
margin-left: 651px;
margin-top: -125px;
The margin-left/top is to locate it correctly... so I can't change that just for the FF... or!?
Any ideas why it's suddenly has moved only in FF?
Do you need my homepage to get the whole picture?
Maybe is not the best way, but it helped me a lot to sort out my browser compatibility problems. If u still face this problems u can target your CSS classes only for Firefox:
sample (inside css file):
#-moz-document url-prefix() {
.my_class{
//attributes that will affect only Firefox
}
}
Could anyone tell me why desktop browsers (Chrome, Safari, Firefox) are showing a CSS background sprite image and the iPhone browser is not?
I have the issue with the social sharing buttons. The first 4 sharing buttons come from the WordPress theme, and the email button was added by me.
The email button is shown on desktop, but not on mobile and I'm not getting why?
I appreciate your help.
Was a problem with selecting classes correctly. Selecting the parent and than the child solved the problem
.parentclass .child {background-size:...;}
.td-sp-share-email is being called for your special email and WhatsApp icons:
ln33:
.td-sp-share-email {
width: 31px;
height: 31px;
background: url("/wp-content/uploads/social-sprites.png") 0px 0px !important;
}
However, you have a rule in style.css?b9d887 that is still setting the background-size property, to 91px 2230px !important:
ln10516:
.td-sp {
background-size: 91px 2230px !important;
}
Your image, social-sprites.png, is only 38px by 76px. Your background-size is the problem.
Update your background-size to what's appropriate and it will work.
When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.