In this question - If the staff and community won't mind - I would like to address two different bugs of different browsers, though ocuring on same conditions.
The bugs happen when an element with display:inline (and a box-shadow, but this is set here more for a demonstration purpose) gets opacity less than 1. Then
IE 10 (at least) chops the box-shadow as if "overflow:hidden" was set.
Opera 12.15 leaves the box shadow only on the first line of the text.
The HTML to demonstrate the issue:
<span class="inline opaque">
<span>Some text.</span>
</span>
CSS:
.inline{
display:inline;
background:red;
box-shadow:0 0 0 10px red;
}
.inline.opaque{
opacity:.5;
}
A live example. I am really frustrated with this happening. Seems very strange and unnatural for me. Would be very grateful for any help.
Thanks!
UPDATE. Seems I have found some workaround for IE. It turns out, that we can shift the box-shadow to the left and top (the directions it doesn't crop in this bug). And to make the element visually occupy the same space, a transform can be applied. It's better visible here
#media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
.block{
-ms-transform:translate(5px, 5px);
transform:translate(5px, 5px);
}
.inline{
box-shadow:-5px -5px 0 5px #c0c;
}
}
Note, that we need to shift (possibly with translate) the contents of .inline as well.
Each line of a display:inline element is implicitly a container. You can see evidence of this if you were to apply border:1px solid black to your text.
Therefore, it's not unreasonable for the browser to render each shadow separately, and that (unfortunately) means placing them on top of elements (read: lines) before it.
As for why the "cropping" manifests only in certain browsers, and only when opacity is less than 1... that's not really something I can answer because it is down to browser implementation. That said... from my understanding, the cropping is technically correct.
Anyway, the "easy" fix is to just apply the opacity to a parent element, like so.
Related
As the title says, I have a text shadow with something along the lines of:
body { background: white; }
h1 {
color: black;
text-shadow: 100px 100px 10px black;
}
In the Safari browser, the shadow gets clipped/not rendered beyond the edge of the element border.
What's stranger is when I trigger a body-background color animation effect (something cheesy that transitions the color from white to black), it seems to render properly beyond the element border for the short time during the transition. Once the transition ends, however, the shadow is cut off again at the border.
If it's visible during transform, add -webkit-transform: translateZ(0); to it. Should work. Are you sure the element that cuts it doesn't have overflow:hidden, though? Another thought: is it possible that the element that cuts the shadow is 3d-tranformed? If it is, that's the cause. It's acting as viewport for all children. If none of the above works, I can't help you without a Minimal, Complete, and Verifiable example. Reproduce the bug here. – Andrei Gheorghiu Apr 19 '17 at 13:13
1
Solution
-webkit-transform: translateZ(0); along with explicitly inlining display: block; (didn't seem to work if it was in my .css file) fixed this for me. Thanks for the suggestion! Sorry that I didn't provide more code as an example, but the post might have grown too long. Safari feels like one jungle of a browser sometimes... – Starcat Apr 20 '17 at 0:03
I've ran into a very strange rendering behavior in Google Chrome recently. If you use the exact combination of CSS described in this fiddle (except for transition, it is just for demonstration purposes):
https://jsfiddle.net/yjtpjstx/1/
.wrapper {
perspective: 1px;
overflow: hidden;
box-shadow: 0 0 21px black;
}
.content {
backface-visibility: hidden;
}
You get elements to appear lower and to the right than they actually are.
If your parent element has any perspective, any overflow (hidden, auto, scroll - they all will do) and a box shadow with a blur, and your child element has backface-visibility: hidden then everything inside that child element appears shifted down and to the right for the amount of pixels defined in parent's box shadow. Elements are actually still where they should be, they just move visually. Try clicking the button in the fiddle and mind that it's actually in the top left of parent with shadow.
Any thoughts on what the hell is going on here and how to fix it? Doesn't happen in Firefox. Temporarly I had to remove perspective but I have some animations in real situation that now look dull without the perspective. Could probably get rid of the shadow and make it some other way and I probably will since I don't think this can be fixed but I just wanted to share this with the world, brief googling doesn't seem to indicate this was encountered before.
Seems to be fixed in newer versions of Chrome.
I have this CSS:
#dotted_line {
width:80px;
height:5px;
margin:10px auto 0 auto;
background:#666666;
background-repeat: repeat-y;
}
i want to be able to repeat it horizontally so i get a dash line but with long dashes
This is an alternate solution to your problem:
css:
.dashed {
margin:auto;
width:50%;
border-style:dashed none none none;
transform: scaleX(2);
}
html:
<div class="dashed"></div>
http://jsfiddle.net/LkVxp/ or http://jsfiddle.net/LkVxp/1/
So what we do is take a border of a div and scale it up so that you can make the dashes longer. just be sure to match the percent to the scale or the width becomes something other than 100% (or you can tweak it to however long you want). Thickness can be controlled normally with border-width.
If you wish to make the space between the dashes shorter it will take a bit more work, You'd want to position a second dashed border relatively and offset it however much you want to reduce the space by. So that the offset one would overlap the open space. At that point you're probably just better off using an image though >.>
heres an example: http://jsfiddle.net/LkVxp/3/
More on topic, it isn't a hard task using javascript(jquery or other) to duplicate a dom element.
You can use a background-image with the same color as your body background and give the impression of a dashed line. See this example.
Image used:
If you want to experiment, there's a CSS property that gives you the ability to use an element (your div in this case) as a background-image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to implement in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
Try the hr tag which can take various attributes, although be warned these are deprecated. For example:
<hr>
<hr width="50%">
<hr align="left" width="50%">
Is it possible to use border-radius on a div (in Chrome and Opera) so that the inner div background would also be affected? If not, how else can this effect be achieved?
Example: http://jsfiddle.net/fE58b/1/
It works well in IE9 & FF7.
Thank you.
It works if you just move the background image from #content to .box:
.box {
background:url(...so_70s_background.jpg) top left repeat;
}
Also if you really need to have the borders in a separate div, you can always add new divs outside the box:
<div class="box-outer">
<div class="box">
<div id="content"></div>
</div>
</div>
Just make sure to apply:
.box-outer {
width:500px;
height:500px;
position:absolute;
}
So, as Cristi stated above, some browsers seem to have a little trouble with clipping overflowing children along the curved border of their parents. It appears that, in order (for at least Webkit) to render child overflow affected by parent border-radius, both parent and child must be statically positioned.
Furthermore, even with this static positioning, it appears that setting an opacity value for the child element will cause it to break the overflow boundaries of its parent (if I had to guess, I'd imagine this has something to do with the opacity value triggering hardware accelerated graphics, in which case a 3D-transform will produce the same glitch).
Luckily, you can use an absolutely-positioned grandparent control the dimensions and position of its static children, and rgba on background and text to simulate element opacity. I just so happen to have a jsfiddle snippet demonstrating some of these workarounds which you might find helpful.
user following to solve border radous issue
border-radius: 20%; /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
-webkit-border-radius: 20%; *FOR ALL OHTER OLD BROWSER*/
-moz-border-radius: 20%; /* FOR MOZILLA FF*/
Does anyone know something more about Opera outline bug?
Check this out:
http://jsfiddle.net/BYgMr/
<div id="outline">TEST</div>
<div id="another-div">Another div</div>
#outline {
border: solid 1px #000;
outline: solid 1px red;
background-color: #fff;
width: 200px;
height: 200px;
}
#another-div {
position: absolute;
top: 100px;
left: 100px;
border: solid 1px #000;
outline: solid 1px blue;
background-color: #eee;
width: 200px;
height: 200px;
z-index: 5000; /* even this is not helping */
}
I'm using the latest Opera, I've checked on TWO different machines with different Opera versions all of them render it like:
What's THAT? In any FF/Safari/Chrome the outline goes below grey area, but in Opera it's still above (even if div parent is way below!).
Google search gives only "Opera 9.5+ CSS bug: rendering outline over absolute positioned" link, but it doesn't want to open.
Any temporary fixes? Or maybe I'm blind and made a horrible mistake somewhere?
This is more of a missing spec in Opera rather than a bug. A bug constitutes something not working according to specifications and Opera is following W3 standards according to step 10 - http://www.w3.org/TR/CSS21/zindex.html)
It is a missing spec in Opera because there's no way to set a style above the last block drawn namely an "outline".
Its probably in our best interest not to use an outline when we could use border or box-shadow but I can't do that in my case since I've got a tooltip which thousands of people load independently onto their sites. And I don't have the luxury of changing everybody's template styling nor would I ever want to.
I've submitted a bug report to Opera (DSK-339836). Hopefully they'll give us a way to draw something above the last thing drawn (ie. outline)
This is not a bug!
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes. Therefore,
displaying or suppressing outlines does not cause reflow or overflow.
Outline is not supposed to be "just another border" property. Its more needed for debug, or creating visual UI hints, around certain elements.
It's not a "bug," per se, but a difference in how the spec was implemented. The outline highlights the edges of the box. That's it. It isn't supposed to be used as a border. If you look closely, you'll see that only the red outline overlaps the other box, but the dark border does not.
Is there a reason you're using a border and an outline and overlapping divs? That seems like an odd use case. If you need to use both, you can use box-shadow as a bit of a hack to get the effect you want in most recent browsers: box-shadow: 0px 0px 0px 1px red;.
First: I see a lot of talk and no intelligent answers.
Second: the outline property in opera seems to have a positive Z-Index and stays on top of all other Z-Indexes.
Third: I came looking for a fix or a deal with it, but instead got rubbish and opinions, and we all know what opinions are like.
I see this as a browser code issue that separates the outline from the element and gives it a positive Z-Index above everything else. All other browsers I have tried work fine including mobile browsers, except Opera.
I was once fond of Opera as a mobile browser but am now seeing more draw backs than anything else.
The only fix I see at this point is a browser ID script that removes the outline property for the Opera browser.
Yes, it is a bug!
CSS 2.1 outlines differ from borders in the following ways:
Outlines do not take up space.
Outlines may be non-rectangular.
So nowhere it states that outlines should be on top of other boxes. Borders don't do that! That the outline is drawn above its own box is allright but thats it. Another box above with a higher z-index and it should not be visible.
I can not even nicely show a floating popup window over a div with an outline, it shines through! This is simply wrong. No other browser does it like this.