After Windows 10 became available as a free update a month ago, I already moved two devices to Microsoft’s new OS, first my Windows 8 tablet, then this past weekend a new laptop from Acer. My old laptop running Windows 7 will probably get the same treatment soon, but it’s not a high priority, since I was planning on replacing it for at least a year. Both upgrades went smoothly, I had some issues with Bluetooth support on the laptop, but I’ll write about that later. First I wanted to share a small bug I discovered in Microsoft’s new browser, Edge, in the hope that it will get fixed.
Since I settled on the current design for my blog, probably more than three years ago, I used a WebKit-only CSS property to decorate the header with a text stroke. It worked fine until now: WebKit-based browsers like Chrome and Safari showed the fancier stroked title, while the rest displayed a simple, bolded text in a custom font. But now, when I opened my homepage in Edge I was surprised to see that the header was gone!
header h1 {
color: white; text-align: center;
font-size: 7em;
-webkit-text-stroke: 3px white;
-webkit-text-fill-color: transparent; }Fortunately it didn’t take long to figure out what the problem is using the inspector: if I manually disable -webkit-text-fill-color, the header shows up again. I then remembered that Edge, as announced several times during the development stage, started implementing some –webkit prefixes in order to render pages correctly, or at least closer to the original intent of their designers. It looks like Edge recognizes -webkit-text-fill-color and overrides the color with this value, making my text transparent, but hasn’t implemented the other necessary component to making stroked text, -webkit-text-stroke. The result, which could impact many sites using these properties together, is that text disappears instead of showing either the outline or the solid color.
- Live example
Stroked text on iOS
Header text goes missing in Edge
Solid text in Internet Explorer
The moral of the story: it’s a bad idea to rely on unstandardized features and even worse not to regularly check live sites for changes and update accordingly. In this case there are some alternatives in CSS, mostly involving text shadows to mimic the stroke effect, and I will be looking into them to correct this problem. In the short term though I will probably remove the effect and go back to a simple header text – until I find the time to properly redesign the blog.
Post a Comment