You can see the implementation here:
http://jsfiddle.net/Wtcdt/
In FireFox on Mac, that circle is round/solid. I want it either dashed or dotted.
What makes it even weirder is that the same property (i.e. border: 4px dashed #000) works fine on an HR. So why does it not work when border-radius is involved?
This is so bizarre to me.
It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.
Your circle is too small. If you increase the height and width you will notice that the shape expands to a rounded-rectangle, the rounded edges remain solid but the lines become dashed.
Its a Firefox bug. Typically you have to either make solid border or remove radius. But if both of the properties are important then you can replace the corner with image like this: http://eblog.foysalremon.com/dashed-border-radius-corners-rendered-as-solid-on-firefox-solved/
Related
I have created a css rotating tetrahedron and now the only thing that prevents me from being happy is that I see that jogged line of the bottom polygon. Here is a jsfiddle: http://jsfiddle.net/mikeonly/uxy9x23n/.
Obviously, I want it to be antialiased. And what I have already tried is fixing it with:
scale(.9999)
adding padding
rotating the bottom polygon in different plans
setting the color of borders in rgba
creating outline: 2px solid transparent
Let me know in case the line is smooth for you. Also, there is a screenshot of that issue when I view it in the latest Chrome: http://imgur.com/nyKKTDb.
Thanks.
I've got two inputs, styled primarily by Zurb's Foundation framework. They're in a .row.collapse and each in a .medium-6.columns (these columns are 50% width, floated left, no margins). The inputs themselves are 100% wide within their containers. It's all pretty simple, and the Inspector and jQuery.css are all returning what I'd expect them to. But there's a border issue. Here's the gist of the CSS:
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
This is to have the effect of collapsing the middle border. But for some reason, this border-right-width: 0 is throwing Webkit (Chrome and Safari but not Firefox) off. The inspector shows 1px border, and the proper border-color. The white input background lines up properly with the second input (that is, there's room for the border), but there's no gray border. Maybe it's rendering transparent?
If I open this up on a retina display, it renders normally - proper borders on both. If I zoom in, the borders show up when it hits the "small" media query (mobile device sizes). But I can't make this border show up on a non-retina, desktop display in Chrome.
Here's how it looks in Chrome:
And here's how it looks in Firefox:
To double-check, I used the Web Inspector to apply a simple border to the first element. It showed up fine (looked like the Firefox screenshot). Adding border-right-width: 0 reintroduced the problem. It seems clear that that's the issue. But I don't know why?
It seems like border-radius may play into this as well? The Firefox screenshot above shows a double-border in the middle, despite the Inspector showing 0 right border. If I uncheck border-radius, in Firefox, it fixes that issue.
These properties should all be independent of one another. Why are they affecting each other?
Edit
Trying to recreate in codepen. Unsuccessful so far, but it looks like it has something to do with transform - these inputs are in a container that is set with the following
position: absolute;
top: 50%;
left: 50%;
#include transform(translate(-50%,-50%));
This has the effect of vertically and horizontally centering the element no matter the width or height in modern browsers. When I turn off transform the border shows up as it should. As I understand, transform accesses the GPU? Or it can? It seems quite possible that this is what's throwing it off. If you look at the screenshot, there are strange border artifacts (like, a partial, interior border on the right side of the left element) that I can't explain.
Edit 2
It's got to be transform - changing the border-color to red makes this clear: the border is being rendered at a sub-pixel level and then, for some reason, cut off in a funky way. You can see a vague pink border around the left input:
This may or may not help and without the fiddle, it's difficult to recreate; but I wanted to share something I've recently encountered with webkit browsers and Foundation.
By default, Foundation attaches a right float on the last column in each row or horizontal block...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99% of the time this is never an issue, unless you have a very small border between columns. Webkit browsers calculate percentages strangely at times.
You mentioned your columns were floated left, but just in case this is still an issue; overriding the above pseudo class to float the last-child column left may help.
I want to/need to have a border of 1px thickness and dotted appearance, where the pattern is x-o-o-x-o-o etc. (dot, not, not, dot...)
This has to be done with border-image IIRC, but I went mad trying to create the image and applying it properly with the CSS statements.
Can anybody give me a hint how both has to be laid out?
Thanks and best!
I could get it to work by making a 7x7 image with dots in the corners and in the middles of the sides. Like this.
And then they can be evenly spaced by making a 2px border, so that the corners and the sides of the element use one dot each (see the markers how the slicing is done). So the css would be something like
border:2px solid transparent;
border-image: url(7x7.png) 2 2 round;
Top border is 6px and green. Left, right and bottom 1px #ccc. The 1px border is bleeding into the 6px, see fiddle for an example.
http://jsfiddle.net/AzHUt/34/
Any solution other than div soup?
for me, this looks like it works exactly like it shoud - set your border-width to 10px for all sides and 30px for the top-border to see this more clearly: http://jsfiddle.net/AzHUt/21/
if you want this to look like a "window" with an bold bar on the top, you'll need another markup ("div soup" like you said).
EDIT: i think this is what you've expected: http://jsfiddle.net/AzHUt/28/ - it's just a little change in the markup, adding another div to it (ugly, but it does the job)
No; you'll need to include at least one other block: if you increase the width of the borders by a factor 10; you'll see why: all colors and widths are part of the same border; there's no way the browser can know which is "more imortant".
You don't actually need any markup changes, however; a CSS2 generated box will do too (though it's pretty hacky IMHO): http://jsfiddle.net/AzHUt/33/
I have a 1px by 1px grey pixel. It is used as a BG image:
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.
So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I've never seen anything like this, and would love some insight.
Thanks!
Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...
A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.
See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.
EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?
If it's just a 1px grey border you're after, why not just use a 1px grey border?
Example:
border-right: 1px solid #cccccc;