5 ms·

SVG changes color when rotated in Safari 10

102 points by einaregilsson 10y ago

unwind 10y ago
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. :)
- Manishearth 10y ago
  Probably just https://bugs.webkit.org/ https://bugs.webkit.org/ ? This sounds like something that WebKit handles.
  - unwind 10y ago
    Right, thanks. I did a quick search but that didn't turn up anything. I'll add the link to the SO question.
- caiob 10y ago
  Safari has indeed a public bug tracker. https://bugs.webkit.org https://bugs.webkit.org
- rangibaby 10y ago
  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
- einaregilsson 10y ago
  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 :)
  - nathan-wall 10y ago
    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.
- glippiglop 10y ago
  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.
__BrianDGLS__ 10y ago
It doesn't change color for me in safari 10. Is this a joke?
- coldtea 10y ago
  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...
  - sdegutis 10y ago
    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?
    - feintruled 10y ago
      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!
      - throwaway2016a 10y ago
        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.
    - geon 10y ago
      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.
distantsounds 10y ago
I don't see this behaviour in Safari 10 either but I am but one of many users.
draw_down 10y ago
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.
0x0 10y ago
Is this the same bug? https://bugs.webkit.org/show_bug.cgi?id=150142 https://bugs.webkit.org/show_bug.cgi?id=150142
robotmlg 10y ago
I'm using the latest Safari Tech Preview, and the example works fine for me. Maybe this is already fixed.
- einaregilsson 10y ago
  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.
einaregilsson 10y ago
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 https://dl.dropboxusercontent.com/u/6430877/screenshot.png
pmiller2 10y ago
Doesn't work for me on iOS 9 mobile Safari.
Tloewald 10y ago
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.
- nathancahill 10y ago
  Yes, using 3D CSS transform is a common performance optimization. 3D enables hardware acceleration.
jstsch 10y ago
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 http://jouwlater.h5mag.com/denken_en_doen/cover

102 points by einaregilsson 10y ago

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. :)

Manishearth 10y ago
Probably just https://bugs.webkit.org/ https://bugs.webkit.org/ ? This sounds like something that WebKit handles.
- unwind 10y ago
  Right, thanks. I did a quick search but that didn't turn up anything. I'll add the link to the SO question.
caiob 10y ago
Safari has indeed a public bug tracker. https://bugs.webkit.org https://bugs.webkit.org
rangibaby 10y ago
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
einaregilsson 10y ago
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 :)
- nathan-wall 10y ago
  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.
glippiglop 10y ago
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.

__BrianDGLS__ 10y ago

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

coldtea 10y ago
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...
- sdegutis 10y ago
  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?
  - feintruled 10y ago
    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!
    - throwaway2016a 10y ago
      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.
  - geon 10y ago
    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.

distantsounds 10y ago

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

draw_down 10y ago

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.

0x0 10y ago

Is this the same bug? https://bugs.webkit.org/show_bug.cgi?id=150142 https://bugs.webkit.org/show_bug.cgi?id=150142

robotmlg 10y ago

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

einaregilsson 10y ago
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.

einaregilsson 10y ago

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 https://dl.dropboxusercontent.com/u/6430877/screenshot.png

pmiller2 10y ago

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

Tloewald 10y ago

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.

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

jstsch 10y ago

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 http://jouwlater.h5mag.com/denken_en_doen/cover