Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
SVG changes color when rotated in Safari 10 (stackoverflow.com)
102 points by einaregilsson on Sept 22, 2016 | hide | past | favorite | 35 comments


I love the comment from the OP, saying he's "figured out how it happens", and it turns out the R and B color components are swapped for some rotational angles.

That's clearly explained, then. :)

I don't suppose Safari has a public bug tracker? This sounds like such an awesome "WTF" it'd be fun to read the developers' take. :)


Here's a best guess based on my knowledge of actually having written a SVG rendering pipeline:

The R and B colour switch in conjunction with the fact that this problem only occurs at non-right angles would indicate that there's a bug in the rendering pipeline that is triggered under specific conditions. Specifically if the transform is at a right angle, then an optimal transform algorithm will be used that processes colours in RGBA format. For all other angles a slower (but prettier) transform pipeline will be used that results in the colour being incorrectly processed in BGRA format. An easy way to test this theory is to set the problem colour to bright green, in which case the bug shouldn't be apparent.

SVG rendering pipelines are really complicated. The quest for optimisation leads to rendering code that has many paths for all the different scenarios. The consequence is that odd bugs for certain conditions are more likely to creep into the code base if you're not careful.


OP here. "How it happens" is not "why it happens". The svg renderer is switching the values of R and B, that's why it turns blue instead of some other color. Why the renderer does that, I have no idea :)


So #ff0000 becomes #0000ff. What about #f00000? Does it become #00000f or #0000f0? Does #00f000 stay the same or become a darker green?

Sorry, I would check myself, but am on Linux and don't have access to Safari 10.


Safari has indeed a public bug tracker. https://bugs.webkit.org


Probably just https://bugs.webkit.org/ ? This sounds like something that WebKit handles.


Right, thanks. I did a quick search but that didn't turn up anything. I'll add the link to the SO question.


It reminds me of a bug in Firefox nightly a few years ago where RGB colors were read as BGR for the OSX traffic lights. They were pretty but it was quite disconcerting lol


A user on my site ran into this while playing Go Fish. He was pretty surprised to see this: https://dl.dropboxusercontent.com/u/6430877/screenshot.png


The interesting takeaway from this, in my opinion, is that modern browsers offer three fairly independent rendering paths (perhaps more): vanilla, 2d CSS transform, and 3D CSS transform. A project I worked on had a truly bizarre chrome-only intermittent rendering bug that we could not figure out for months. I eventually "fixed" it by adding a null (translate by zero or whatever) CSS 3D transform at the root of each affected element (sending everything down a different rendering path) and the problem went away.


Yes, using 3D CSS transform is a common performance optimization. 3D enables hardware acceleration.


I saw something like this in Safari 9. Super annoying. The workaround I discovered was that it stopped happening if the opacity wasn't 1. So I set it to 0.99.


I don't see this behaviour in Safari 10 either but I am but one of many users.


Also when scaling, not just when rotating. Take a look at this one in H5mag (top-right hamburger turns blue occasionally when resizing the window): http://jouwlater.h5mag.com/denken_en_doen/cover



I'm using the latest Safari Tech Preview, and the example works fine for me. Maybe this is already fixed.


Probably. I'm using 10.0 (11602.1.50.0.10), which is what I got when I upgraded through the App Store this morning.


It doesn't change color for me in safari 10. Is this a joke?


No, a joke is like "Why did the chicken cross the road? To get to the other side".

This makes so little sense as a joke, and there are tons of reasons why it would work for some and not others and still be a bug...


This joke isn't working for me. Is it working for anybody else?


The "joke" is that it has nothing to do with the chicken, which defies the expectations set for a regular joke. The act of "crossing the road" serves to get to the other side of the road.

It's anti-humor: https://en.wikipedia.org/wiki/Why_did_the_chicken_cross_the_...


I never understood that joke. Is it supposed to be an anti-joke? That's the only way it makes any sense as a joke. And if so, why is it one of the first jokes we hear as children?


>I never understood that joke. Is it supposed to be an anti-joke? That's the only way it makes any sense as a joke.

It's just a joke based on going against the listener's common expectations -- like almost all jokes.

They expect a specific intent for crossing the road -- and having something to do with the fact that the being doing the crossing is a chicken, but instead they get the obvious and most immediate and base reason for anybody crossing a road.


Right, that's what makes it an anti-joke. Anti jokes can be funny. Just, it's weird that it's one of the first jokes we're introduced to growing up, because it's not a typical or even basic kind of joke.


It's the introductory example of an anti-joke in the culture's humor-teaching curriculum.

A lot of the jokes that we tell kids are actually teaching them the basics of what is considered funny in our culture. Much of it demonstrates how to establish a pattern or preconception, then break or subvert it for the desired comedic effect.

For instance, you can't tell "banana-banana-orange" or "interrupting cow" as your first knock-knock joke, because you first have to establish the pattern of a "proper" knock-knock joke.

After the chicken crosses the road, you tell some shaggy dog stories, then you hit them with the never-ending setup, where the joke is in how long you can get them to listen to your pointless rambling while waiting for a punchline that never comes.


A very common joke among children where I live is a word play on "catch up" vs "ketchup".

However, I live in Sweden, and the joke makes avsolutely no sense in swedish. I was 15 before I got it.


Haha, we have the same thing in Iceland. It basically turns it into "Two tomatoes were walking across the road when one was hit by a car. The other one said, 'come here you tomato sauce'", which is a terrible terrible joke :)

My daughter messed it up even more and started with "Two tomato sauces were walking across the road..." at which point it's no longer a joke, just a story about a traffic accident...


I heard some speculation that it is a play on the "other side", i.e. death, in other words the chicken will get killed crossing the road but will still get to the "other side". Which would make it a proper punchline, though obtuse in the extreme!


That strikes me as when an author writes a story and then years later an interviewer asks her how she came up with such an amazing subtle metaphor. To which the author replies... they didn't, the reviewer is reading something into it that wasn't intended.


It turns blue for me. Safari 10 on El Capitan.


Updated to Safari 10.0 (10602.1.50.0.10) last night, but I'm still on OS X Yosemite (10.10.5), and there's no color change for me. I feel left out. :(


No, it doesn't work on all builds of 10. I have Safari 11602.1.50.0.10, which is WebKit 602.1.50, it happens there at least.


I'm running macOS Sierra, 10.12 and Safari 10.0 (12602.1.50.0.10) I do not get the color change.

Yes, 12602, not 11602.


Maybe they already fixed it. Doesn't change for me in Safari 10 / Browserstack either.


Doesn't work for me on iOS 9 mobile Safari.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: