Dotted/Dashed borders fail on rounded corners in Firefox

I just learned today that a dotted or dashed border will render as solid for the rounded portions (specified by border-radius) in Firefox. There is an open bug for this, but I haven't run across it until just now. So if you're wondering why you can't put a dotted border on that circle in firefox - that's why.

Which looks like this in Firefox (screenshot from v21)

demonstrating the Firefox bug for dotted, rounded borders

Comments

SASS Converts Zero Opacity 'rgba' To 'transparent'

I recently had a strange problem after updating SASS. I have a modal dialog with a semi-transparent overlay behind it. For modern browsers, I'm using a CSS transition from rgba(0,0,0,0) to rgba(0,0,0,.5) For older browsers (namely IE8), I'm using some JavaScript to apply the transparency and animate the transition. To make sure the background gets set correctly, I'm using the standard fallback strategy of defining the background as background: rgb(0,0,0); right before the rgba line. This worked fine, until SASS optimized my code by changing background: rgba(0,0,0,0); to background: transparent; The reason? It's 2 characters shorter. Yes, we've now saved 2 bytes of easily compressible text in exchange for breaking my code. Why did it break? Well, if you haven't already figured it out, normally a browser that doesn't support rgba will simply skip that property and move on. But transparent is supported. So now, instead of h...

Automatically Calculating Foreground Color using SASS

I ran into the problem, as I'm sure many others have, where I wanted to dynamically assign background colors to my components, but also needed to adjust the foreground color to be readable and visually appealing. It's easy for something to fall through the cracks when changing colors, and then we end up with unreadable text. So to try and avoid this, I put together a SASS function that selects a color for text based on the background color you give it. This also performs checks to make sure the contrast meets a given Accessibility spec (as per W3C rules). So far I've had pretty good results with it. Please feel free to tinker and use this in your own projects. It's far from perfect, but it has See the Pen Calculate Foreground Color by Thomas Pietrosanti ( @Rykus0 ) on CodePen .

Be Careful Using SASS @extend, CSS3 Selectors, and IE8

I recently ran into a situation where some of my styles were broken in Internet Explorer 8. What makes this different from all the other times my styles broke in IE8 was that, as far as I could tell, it was correct. Consider the following code: %highlighted { background-color: #ff0; color: #333; } .keyword.is-active { @extend %highlighted; padding: 10px; text-transform: uppercase; } No problem, right? Then why isn't it working? I wasn't sure, until I looked at the compiled CSS and saw something like this: .some-list:nth-child(2n), .is-highlighted, .keyword.is-active { background-color: #ff0; color: #333; } .keyword.is-active { padding: 10px; text-transform: uppercase; } Since IE8 doesn't support the css selector nth-child , it ignores the entire rule . Without looking at the final output, there's no way of knowing if this will happen ahead of time. So what can you do? Well,...

Browser Cache

Search This Blog