I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).
What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there's a little white line appearing on the corner edge.
I made a reduced test case here: http://dabblet.com/gist/3828561
Anyone have a solution to overcome this one? Thanks!
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden.
Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
Related
I'm trying to emulate a certain kind of menu that can be seen in iOS with CSS. It has menu items in a ul, and clicking each one makes the menu slide over to reveal the page.
However, whenever the menu is sliding (while it's actively sliding) the corners turn square. Then they go back to being rounded after animation is finished.
Here's a jsfiddle with a lot of my superfluous styling code cut out. If you click on either of the titles in the list, you'll see that the corners turn square just as the content is animating. This can be seen again when you press the back button.
I see this issue in the latest Chrome and Safari, but not in Firefox.
You could give #modal-content a z-index of 1 (assuming nothing below it has a z-index greater than 1) and it should keep the border-radius during the transition.
.modal-content {
position:absolute;
bottom:0;top:0;left:0;right:0;
margin: 10vh;
border: 1px solid #ccc;
border-radius: 15px;
overflow:hidden;
z-index: 1;
}
By making .modal-content higher in the element stack, when the transition happens the child elements of .modal-content are moving "underneath" .modal-content. So .modal-contents border isn't obscured by the transitioning child.
In the example bellow:
http://jsfiddle.net/Du8f6/3/
Im setting inner shadow to the container and 10px border with border-radius set to 50%.
And the result is weired thin white border outside the container border.
The thin white border is visible in:
mozilla firefox
ie 11
and its not visible in:
opera
safari
chrome
any suggestions for fixing this are welcome.
It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.
Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:
In your html:
<div class="fakeborder"><div class="sub">Hm</div></div>
and in your css:
.sub {
...
border: 0px solid black;
...
}
.fakeborder{
margin:0;
padding:10px; /*The fake border width*/
background:black; /*The fake border color*/
}
I had a similar issue.
Even if I set
box-shadow:0 0 0 rgba(0,0,0,0);
to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.
That was working in webkit browsers, but FF was still rendering a thin shadow.
A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)
box-shadow: none
I have a div with 1-pixel-border and height:29%. Chrome for some reason renders it without the bottom border.
See http://jsfiddle.net/9WVuC/4/
This issue depends on the actual percentage value and container size; when I change them, border sometimes appears and sometimes disappears. Seems that there is some rounding error in Chrome rendering engine when it's calculating actual div's height. Also, it occurs only if overflow and position are specified for that div.
Is it a known bug and maybe some workaround exists? Of course I can get rid of that percentage values by recalculating height manually and setting it with JS, but it's not very elegant solution.
this is because of the overflow:hidden; style you have on the div, the border actually appears outside of the div in question, so according to the height of the div (with it being a %) it doesn't take this border into account.
Looking at your code i would recommend moving your overflow:hidden; to the containing element of the divs (the td) that fixes the problem and will have the same effect on the content of the class="lower" element if it overflows.
You can fix this "bug" by setting height to height: 28.95%;
Make sure you do not use tables for layout. They should only be used for tabular data.
decrease the height or remove overflow: hidden
lower{
height: 28%;
position: relative;
overflow: hidden;
border: solid 1px black;
}
Fiddle demo
This is probably a rendering issue depending on screen/window size and the element's computed size (with decimals). A workaround for me was to put an invisible box-shadow where the border is missing and it fixes the rendering. For the bottom border it would look like this:
box-shadow: 0 1px 0 0 rgba(255,255,255,0);
My content is wrapped in a div which has an inset box-shadow, to try and give the effect that the content is recessed into the page. The problem I have is that any items of content that come close enough to the edge to overlap the shadow hide the shadow rather than having the shadow overlaid on top of them. http://jsfiddle.net/wheresrhys/Y8tXW/
Is there a way, other than defining shadows on every element, to achieve the desired effect?
You could use something like: http://jsfiddle.net/Y8tXW/5/
That is add an inner box with the style:
.overlay{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
pointer-events: none; /* Makes sure the inner contents can still have mouse interaction*/
}
Assuming you want the other elements being covered by the shadow. For browsers too old to support box-shadow set display:none on the overlay. Alternatively, use the :before pseudo class to only add the overlay when it's needed.
Instead of using a few empty elements to do this (which would prevent interaction with any elements at the edges), I would suggest using CSS3 border-images. If I'm not mistaken, borders will be drawn over the top of content (at least partially), without interfering with interactivity.
Instead of adding position:absolute and disabling the content inside the div and also overlaying the shadow effect over the content, you can simply add padding to your .shadow div so that the content inside doesn't overlay the shadow effect.
Check this out http://jsfiddle.net/Y8tXW/12/
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.