background-clip : Strange behaviors - firefox

I have been experimenting with some css3 features lately and I found some strange behaviours. (I use firefox-nightly 18.0a1 (2012-09-24) and chrome Version 22.0.1229.91 beta)
I wanted to make a circle box with say a black background, and a gradient border say blue to transparent.
So I thought I could use 2 different background and clip one (the black one) on the content-box, to make the blue/transparent one appear on the padding-box remaining out of the content-box.
background: -webkit-linear-gradient(0deg, black, black), -webkit-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background: -moz-linear-gradient(0deg, black, black), -moz-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background-clip: content-box, border-box;
It works perfectly fine in Chrome, but in firefox, the different background clips don't seems to be applied, instead, only the latter one is applied, so both background are cliped the same way, so one can't see the blue/transparent background.
Then, I started to want to put an external border around it, say a thin blue border.
so I added :
border: 3px solid blue;
Chrome displayed my circle in a very strange way :
Everything was clipped in a circle-shape because of the border-radius, but the content became a square.
I made a jsfiddle to make things clear : http://jsfiddle.net/wUtPX/
Is this some known bugs ?
Should I report them to some bug trackers ?

I'm reading the MDN specs for background-size. Here they explicitly say that:
Values for the multiple backgrounds, defined by background-image, may
be listed separated by commas
While in background-clip specs it's not clear. So maybe it doesn't support multiple values.
Also, the W3C specs don't include background-clip in "Layering Multiple Background Images" how-to. So i guess it shouldn't support multiple proprieties, and what Chrome is doing is actually "wrong".
You can probably find a workaround with background-origin (which supports multiple values) and background-size, for example:
background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;

Related

Text with background color and rounded borders in asciidoctor-pdf

I am trying to create some badge-like texts for my documentation, to highlight the status of some issues.
Here are some examples (jira issues embedded in a confluence wiki)
Example for a "closed"-badge
Example for "waiting for solution"-badge
I even struggle to find any simple way to set a background-color for a text in asciidoctor-pdf.
The most promising attempt was using a themed button-macro.
btn:[Closed]
with this theme-section:
button:
background-color: #88FF88
border-color: #33FF33
border-radius: 5
border-width: 0.5
border-offset: 3.0
The result is quite close to what I hoped to achieve, however I cannot have buttons with different colors. Or is it possible to overwrite the theme-values in the *.adoc file itself?
Is there any other possibility to create something similar in asciidoc-pdf?

z-index doesn't seem to work normally at smaller sizes

I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}

Webkit not respecting overflow:hidden with border radius

I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.
This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.
Here is my code:
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.
So is this a bug in Webkit, or have I got something wrong?
Here it is on YouTube if you don't have a Webkit browser handy...
http://www.youtube.com/watch?v=3vyVy21nWsE
Firstly, what a cool demo!
I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.
I'd been trying to do the same, and was using border-radius to mask elements to a circle.
I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).
Here's the single line of code I added to the container (masking) element:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
I thought I would have to use hard color stops, as follows, to get the hard edge:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.
You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.
As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)
It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
I have included vendor prefixes but you can remove them if you want.
Seems its a mixed working fix:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
http://jsfiddle.net/qWdf6/82/
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
border-radius; overflow: hidden, and text is not clipped
Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:
<div style="border-radius: 15px; border: 1px solid red;">
<div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
<span style="position: relative; left; -20px;">Some stuff that overflows.</span>
</div>
</div>
With a border on the inner div, the clipping wasn't perfect.
Totally weird.
I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:
-webkit-clip-path: circle(50%, 50%, 100%);
Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.

Border-radius and background not connecting in Firefox only

Here's my fiddle: http://jsfiddle.net/edelman/NJHLU/
Basically, if there's a border radius on an element with a border, the border and background don't actually touch, creating a little inner white circle that looks stupid crappy.
Things I've tried that haven't worked:
background-clip and all of the possible values
overflow: hidden
border-collapse with both values
Nothing seems to work. Is this just a FF rendering bug that I have to just deal with?
I have seen this question, but I don't have the luxury of wrapping, as I'm doing this CSS on generated content (:before pseudo element)
EDIT: I have also tried using box-shadow in lieu of a border, but that has the same problems.
You could use the technique described in the answer you linked to. Add a FF hack:
-moz-box-shadow:0px 0px 0px #2eb8ae;

Shadow & Opacity In css3 For IE8 (Not Match)

i have some images (in front of my bachground-image) with low opacity(png format)
and every thing was good in ie8 & firefox until i add pie.htc(or border-radious.htc from google code) for rounded corners & Shadow Box in ie8...
after adding pie.htc by :
behaviour : url(pie.htc);
and adding below codes :
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 20px red;
-moz-box-shadow: 5px 5px 20px red;
-webkit-box-shadow: 5px 5px 20px red;
the opacity of my images has gone...
i test it with a simple html project and figured out when we use shadow box in ie 8(just ie8 & ff is ok) the shadow fills our entire element , so the opacity is wanished.
how can i fix this shadow + opacity problem?
=====================================================
MY QUESTION IN ONOTHER WAY :
HOW CAN WE COMBINE THE BELOW CODES FOR IE8 (with keeping opacity):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";//opacity
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);//opacity
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";//shadow
thanks in advance
icant is correct but has a small typo. It should be progid instead of profid. I tried editing but it wouldn't let me edit just one letter.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Thanks icant!
it seems it's not possible to use shadow with opacity In IE 8...
When You add shadow after opacity to an element (in firefox every thing is ok) in IE8 you can not feel Opacity exists , because of that shadow fills the entire element and do n't let the opacity show itself.
however i checked this issue by the simple html project and searched for solving this issue with no results / if you find a solution about this plz share it with us.
Just put the shadow after the opacity and add a space in-between. It's as simple as it could be.
filter: profid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);

Resources