So I am using #e5592e as a background colour.
In Safari it renders significantly brighter than in Firefox or Chrome. To the point that I need to change it.
However, I can't seen to find a css hack that allows me to target Safari only.
Is there a more elegant solution anyone is aware of?
edit: Adding code to demonstrate the problem;
<html>
<style>
p {
background-color: #e5592e;
min-height: 500px;
}
</style>
<body>
<p></p>
</body>
</html>
Not the page in question but still demonstrates the same problem.
For me, the colour here is much brighter in Safari than in Firefox or Chrome.
Related
On a website I'm developing, I'm using mix-blend-mode:difference to give an interesting effect when some elements are positioned over other elements. I noticed recently that in webkit browsers, on my Macbook Pro display, the color of the div with mix-blend-mode:difference on it is much darker than it should be, in some specific scenarios.
See my codepen: https://codepen.io/matt_o_tron_5000/pen/LYxPaLm
HTML:
<div class="background">
<div class="plain-color"></div>
<div class="blend-color"></div>
</div>
CSS:
.background {
background-color: #fff;
}
.plain-color,
.blend-color {
width: 200px;
height: 200px;
}
.plain-color {
background-color: #04f;
}
.blend-color {
background-color: #fb0;
mix-blend-mode: difference;
}
In the codepen, one div is using a normal hex color code as the background color, and the other div is using the exact opposite hex code as the background color, with mix-blend-mode:difference applied.
On my external monitor, these two divs are the exact same color (and yes this monitor is reliably color-accurate). But if I move the window to my Macbook Pro display, suddenly the mix-blend-mode div is much darker than the other.
Additionally, when testing in Firefox, the color of the 2 divs match exactly no matter which display I view them on. Only in Safari and Chrome does the div look unexpectedly dark on my Macbook monitor.
I assume this has something to do with the fact that Safari and Chrome use webkit while Firefox uses a different engine (gecko), but... Why the difference between monitors? I am confusion.
Photo examples:
2 divs in Chrome on external display:
2 divs in Chrome on Macbook display:
Tried to set background image for body's id.Below the css is not working in IE.It is working only in chrome and firefox but not working in IE.How to resolve this issue.If anyone know please help to find solution.
HTML:
<body id="bg"></body>
CSS:
#bg{
background:url(/test/images/bg.png) repeat scroll 0 0;
position:fixed;
}
i reduced a "zurb foundation" problem to the following minimum of code. When i open a website with that code in Safari, sometimes not all images load. Sometimes none, sometimes just one or two. In the moment i resize the browser window, all lost images appear.
<!DOCTYPE html>
<head>
<style type="text/css">
p { float: left; }
img { box-sizing: border-box;
max-width: 100%;
border: solid;
}
</style>
</head>
<body>
<p><img src='1.jpg'></p>
<p><img src='2.jpg'></p>
<p><img src='3.jpg'></p>
</body>
</html>
Maybe it's just a rendering/speed problem of Safari and the combination of box-Sizing, float, border and max-width. When i try it locally in my file system, there seems to be no problem (fast). On two different web servers, images appear different certain.
'Normal' server:
http://test5.topiclodge.com
Slow server:
http://wiki.norm-konform.de/test/
I testet it on 3 Macs (Safari versions 6.0.3 and 6.0.5)
Maybe there is a workaround or any idea?
Thanks a lot!
WebKit browsers don't like images without width and height attributes added to them. Add width and height to the images and try again.
The following code works differently in Firefox and Webkit (Safari/Chrome) and should not. From what I understand, Firefox is rendering it correctly. How can I make Webkit render it the same?
<!doctype html>
<html>
<head>
<style type="text/css">
.frell {
margin: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<button class="frell">Test</button>
</div>
<body>
</html>
Probably inheriting either it's parent's width or getting display:block. What does the Chrome developer tools say? I'd either specify a width (% or px) or display:inline (possibly inline-block)
Firefox is rendering it incorrectly, webkit is rendering it correctly. To make firefox behave, you need to add width: 100% to the class, even then, that won't work in all cases, but it will be closer.
Absolutely positioning an item and specifying both left and right should make the item become the necessary width to fill the space between them. For a simple test, here is a jsfiddle http://jsfiddle.net/c3EeF/2/ that shows what happens when you apply the same class to both the button and div tags. Firefox misbehaves when using the button, and I have been unable to find any setting that makes it work 100% correctly.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>opera border radius</title>
<style type="text/css">
img{
border-radius:10px;
-o-border-radius:10px;
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bonsai_IMG_6426.jpg/450px-Bonsai_IMG_6426.jpg" width="337" height="450" alt="my think">
</body>
Opera doesn't like adding border-radius to images directly -- Opera is stubborn like that.
For a solution that works in Opera, check out http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/
Also, put the real CSS rule border-radius after the vendor-prefixed rule -o-border-radius.
Take a look at http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius
Border-radius has had issues in opera, since quite some time. In latest versions, if supported
can be used directly using border-radius property.
Officially, Border radius property is supported by all Opera versions > 10.5, but NOT on Opera Mini, and Opera Mobile < 11, but seems to give problems.
(Also, tag this question under css3)
[EDIT]
I just checked your code again. You wanted to appy border-radius to an image. This is not possible in Opera, unless you put it as a background-image using css instead of foreground one.
So to get this done, make a div and apply the rounded corners to the div instead of the img.
then set the background-image as the image, you should get the rounded corners. In case the image doesn't come centered, just change position property. That should do the trick.
Here, try this : http://jsfiddle.net/c8nmZ/5/