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:
I have several simple web pages that contain a similar layout. All these pages are embedded in a bigger product within iframe, to keep them independent. Since the iframe can be resized in any way and expanded, can go fullscreen and so on, the page should adapt to it. The chosen solution was to rescale the whole content, as it makes it dramatically simple to create (and media-queries wouldn't work).
I have noticed however a problem when testing on Firefox (v68 x64). When I scale down divs with borders, at some point the borders are scaled inconsistently. Different sides of the divs will either show or not any border. The resulting effect is horrible, and I noticed that this does not happen with other browsers (not even IE11 :D).
I prepared a little jsfiddle to show what happens: jsfiddle
.container {
width: 400px;
height: 400px;
background: black;
transform-origin: 0 0;
padding-top: 30px;
transform: scale(0.4);
}
.btn {
border: 2px solid white;
margin: 20px 30px;
height: 50px;
color: white;
line-height: 50px;
padding-left: 20px;
}
<div class="container">
<div class="btn">Btn 1</div>
<div class="btn">Btn 2</div>
<div class="btn">Btn 3</div>
</div>
This happens when I downscale a div that contains other divs with borders. In this example the second button appears to not have a top-border.
I obviously don't expect all pages to scale down indefinitely and still look good, just have consistent borders that do not disappear. In other browsers it works much better. Does anybody know how this problem could be solved/improved? I am not able to change the underlying conditions (scaling requirements, embedding the page), but I have full access to the page itself and I'm able to change it.
Let me know if you require more details (e.g. Screen details, default page resolution...etc).
NOTE: The suggested duplicate has nothing to do with this issue, while the problem "looks similar", a quick read would show that the browser in question is different, the basis of the problems are completely different, and going further, none of the solutions work.
I have been busy creating my website, however in the process of testing my in-progress main page on Opera I noticed that It was adding a horizontal scroll bar. After cutting bits out of my page I noticed that if I only left a single div with the ID feature the problem would still occur. I tried searching it by couldn't find anything on it... anywhere.
Here is a link to a page exampling the problem Opera Box Shadow Bug
It is important to note that it only occurs in Opera and as part of the CSS3 Spec it is stated that box-shadow does not at height or width.
Does anybody have a easy solution for this? The only thing that I found that worked was to put a containing Div around the box shadow div, or around several divs and set overflow:hidden; , which is far from ideal.
I haven't checked Opera for Windows but it is occurring on Opera for Mac (v11.50).
I tested your file in Windows Opera and it is displaying the same way.
The only way I was able to make it work was to also wrap a div around your #feature div, add overflow:hidden, and a larger height. Here is my code
html, body {
margin: 0;
padding: 0;
}
#hidden{
height:400px;
overflow:hidden;
}
#feature {
width:100%;
height: 375px;
background: #000;
box-shadow: 0 4px 4px 4px #000;
}
<div id="hidden">
<div id="feature">
</div>
</div>
Besides this, I would use a 1px wide image with repeat.
The bug seems to be solved at least in Opera 11.60.
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".
Here's a quick and dirty round corners technique I've been playing around with.
<!-- assuming the div isn't statically positioned -->
<div>
<img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
<img src="box_TR.png" style="position:absolute;top:0;right:0;"/>
<!-- other content -->
<img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
<img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>
Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.
Question: How terrible is this technique? Is it passable or should I abandon it completely?
I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.
It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:
<div class="whatitis">
bla blah ... content here
</div>
and the style:
.whatitis {
background: whatever;
border: whatever;
border-radius: 1em;
-moz-border-radius: 1em
-webkit-border-radius: 1em;
}
Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?
Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.
It's a terrible solution, sorry :-)
It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.
If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):
The markup
<div class="boxWithRoundedCorners">
<div class="roundedCornersTop">
<div class="roundedCornersTopRight"></div>
</div>
<p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>
<div class="roundedCornersBottom">
<div class="roundedCornersBottomRight"></div>
</div>
</div>
The CSS
.boxWithRoundedCorners { background: red; }
.roundedCornersTop {
background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
height: 20px;
}
.roundedCornersTopRight {
background: url(topRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
height: 20px;
}
.roundedCornersBottomRight {
background: url(bottomRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
Got it? Hang on, I'll put up an example somewhere :-)
Edit: Just threw up an an example!
Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners.
Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.
You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.
This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.
This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.
In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).
CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.
All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.
CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.
you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.
http://www.twinhelix.com/css/iepngfix/
If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):
div.rounded {
width: 600px;
padding: 0 10px;
}
div.rounded:before,
div.rounded:after {
display: block;
content: "";
width: 600px;
height: 10px;
}
div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }
Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)