Search code examples
google-chromesvgsvg-filtersblockly

Blockly workspace background shows random image?

I'm facing a weird bug which cause background of Blockly shows random image

The correct background should be like this: normal background

But it shows random image (mostly favicon?) instead

incorrect background

It's really too weird to describe in words, please take a look at this screen record

I extract svg from Blockly (which I used in the video) that can reproduce the bug

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="blocklySvg" width="1209px" height="270px" style="display: block;">
  <defs>
    <pattern id="blocklyGridPattern5105292194395497" patternUnits="userSpaceOnUse" width="25" height="25" x="1202" y="219">
      <line stroke="#ccc" stroke-width="1" x1="11" y1="12.5" x2="14" y2="12.5"></line>
      <line stroke="#ccc" stroke-width="1" x1="12.5" y1="11" x2="12.5" y2="14"></line>
    </pattern>
  </defs>
  <g class="blocklyWorkspace">
    <rect height="100%" width="100%" class="blocklyMainBackground" style="fill: url(#blocklyGridPattern5105292194395497);"></rect>
  </g>
</svg>

Is this a bug related to Chrome? or I misconfigured something?

Additional info about my environment

  • Chrome 56 (seems only happens in Chrome)
  • MacOS 10.12.4
Solution

  • After doing some investigation, I think this is a bug of Chrome.

    I already reported it to Chromium, and they can finally reproduce this bug.

    I answer my question just for record, in case someone have same issue.