Black background in Safari and Edge

[St1c]

Hi,

I'm building application in Angular 2 and implemented latest version of Blockly into it. Everything works perfectly in Chrome, but in Safari I'm seeing black background on .blocklySvg, and controls sprites are also being displayed wrong (seems like CSS bug). I use untouched blockly_compressed.js in vendors.js bundle and custom blocks implemented as directives, which are being built in separate bundle (app.js).

I tried to force background with CSS but nothing worked. I also tried to move toolbox outside of the injection div, also didn't help. Seems like bug in the source

Safari version 10.0.3 (12602.4.8.)
Chrome Version 55.0.2883.95 (64-bit)

See the enclosed screenshots

[picklesrus]

Are you importing other CSS? What does the console tell you it thinks the background color is? Does Chrome's console tell you something different from Safari's?

Note that I have 0 experience with angular :-/

[picklesrus]

It does look like you have 4 copies of the whole sprite sheet, 1 for each control (trash, zoom in, etc.). Another thing to try besides digging around in your css definitions would be to toggle controls on and off and play with your grid to see if that changes anything.
I would play with the following:

trashcan: try setting to false
grid: try removing it
zoom: try removing it

[St1c]

I tried that. If I look in the developer console, I see the same colours in chrome and safari.
The only thing which I can change from external CSS is this:

.blocklyMainBackground {
// Ugly hack to fix black safari background
opacity: 0 !important;
}

The reason why there are 4 sprites - is that there are actually 4 controls - but in safari the proper background position and size are not applied, that why the whole sprite is displayed, instead of only the correct subpart of it.

It seems that this is definitely related to some CSS which is not loaded correctly - but as all CSS rules are defined in the blockly JS library, I have zero control over it.

[picklesrus]

Does changing the .blocklyMainBackground rule like that actually fix the background?
The .blocklySvg class on the inside the injection div is relevant ( Blockly's default css specifies a background-color: #fff. ) The fill on the rect with class .blocklyMainBackground is another relevant thing that comes to mind. Did you try turning off the grid to see if the background is still black?

Yes, it does seem like the CSS is loading in an odd way or there are some rule conflicts with a file outside of blockly. I'm debugging blind though since I don't see this problem in safari on our demos (e.g. https://blockly-demo.appspot.com/static/demos/code/index.html). If this page is hosted somewhere, I can take a look at the html and see if I spot anything.

[St1c]

It only hides the black colour (makes it transparent - hence white).
The demos works OK in Safari:

I created working version on my server, so here is the link:

http://blockly.dataworkers.eu/parser/classifiers

[tahagoal]

I faced the same problems in Safari and Edge:
The grid is black and the sprite duplicates 4 times.
Did you find any solutions ?

[St1c]

Hi,

I also face the same problem in Edge, even in newest version of angular. I reported this issue also in angular repo (angular/angular#14843)

It has been updated with tag core&compiler bug, but no updates whatsoever after that :)

[tahagoal]

Thank You

[Bohdan-Tereta]

This happens because you have 'base href="/"' tag in your AppComponent.html.

That tag influences how svg processes some style urls (which is normal behavior), but urls generated by GoogleBlockly do not need that tag, it is needed only for angular to work, and so some svg style urls become invalid.

In Angular 2+, you can inject the base path in your app module instead of using the tag.

import { APP_BASE_HREF } from '@angular/common';

@NgModule({
providers: [{
provide: APP_BASE_HREF,
useValue: '/'
}]
})
export class AppModule { }

Don't forget to remove 'base href="/"' tag from your AppComponent.html.

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

That solves the problem. But creates another one with deep routing in Angular (deep direct links like www.somesite.com/entity/2 stop working)

[Bohdan-Tereta]

Proper solution would be (finally):

1. Add this function to Blockly sources

/**
 * Convert local uri to global uri, required for svg to work correctly when page contains <base> tag
 * Fixes Safari svg rendering issues (black background, misplaced zoom/trash controls etc)
 * @param {string} localUri local uri string
 * local uri example: "url(#blocklyTrashBodyClipPath837493)"
 * @return {!string} global uri
 */
Blockly.convertToGlobalUri = function (localUri) {
 var baseUrl = window.location.href.replace(window.location.hash, "");
 var idx = localUri.indexOf("url(");
 return localUri.slice(0, idx + 4) + baseUrl + localUri.slice(idx + 4);
};

2. In all places where you see 'url(#' inside blockly sources, use Blockly.convertToGlobalUri() to convert local uri to global one

Source of the issue: blockly generates local uris even when tag is present which is incorrect (svg should react to tag), most browsers are 'smart enough' to convert local uris to global in that case (that browser behaviour is not part of specs though), but that doesn't happen in Safari
So I assume that isn't a safari bug and should be fixed in blockly

Solution was implemented and tested by me and works in Safari. Noticed no side effects in Chrome/Firefox/Edge/IE too.
Steps to reproduce:

1. Take any blockly example
2. Add tag to page
3. Open the page in Safari
   Expected: white backround, correctly placed zoom/trash controls
   Actual: black backround, zoom/trash controls are visually multiplied (see screenshot at the beginning of this thread)

[profgarrett]

It would be great to see the code from Bohdan implemented. I experienced a similar issue after embedding Blockly into a React application. I narrowed down the root cause to a similar tag in my html document. Upon removing this tag, the black background in Safari was fixed.