Eclipse Community Forums: Remote Application Platform (RAP) » Problem with background color on Chrome

Home » Eclipse Projects » Remote Application Platform (RAP) » Problem with background color on Chrome(For Chrome, divs seem to be created with a -webkit-gradient instead of a background-color)

Show: Today's Messages :: Show Polls :: Message Navigator

Problem with background color on Chrome [message #1752268]

Fri, 20 January 2017 13:02

Gunnar Adams

Messages: 49
Registered: May 2016

Member

Hi,

I would like to report a potential error in RWT regarding the Chrome browser:

It seems, that setting a background color to a composite will always set a webkit-gradient(linear, 0% 0%, 0% 100%, from (<color>, to <color>) in addition to the color.
If in addition to a background-color (which is always(?) set) a background-image is also set, Chrome will report an invalid property value.

You can verify this e.g. in the RWT Controls Demo for Canvas (Check "Background Image")

In our application, this unexpected gradient (which isn't a gradient at all) prevents a client-side CSS style from overriding the background-color (using !important). I need the Composite to have a transparent background.

Any ideas?

Kind regards
Gunnar Adams

Report message to a moderator

Re: Problem with background color on Chrome [message #1752270 is a reply to message #1752268]

Fri, 20 January 2017 13:28

Ivan Furnadjiev

Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria

Senior Member

Hi,
just tested the Controls Demo Canvas tab under Chrome v55.0.2883.87 (Windows 7 x64) and everything is working as expected with all combinations for background color, image and gradient. Chrome does not report any error.
The gradient property was needed (didn't verified it recently) to workaround layout issues in all WebKit based browser. See [1] for more details.
Please provide more information how to reproduce the problem.

[1] 428717: Invisible Elements in RAP Demo with latest WebKit based browsers
https://bugs.eclipse.org/bugs/show_bug.cgi?id=428717

Regards,
Ivan

Report message to a moderator

Re: Problem with background color on Chrome [message #1752428 is a reply to message #1752270]

Mon, 23 January 2017 17:00

Gunnar Adams

Messages: 49
Registered: May 2016

Member

Hi Ivan,
thank you very much for the very quick response.
You are right: the Canvas demo works fine.
If you set the background image, the developer tools in Chrome mark the background style of the div containing the canvas as an "invalid property value", though (rf. attached image).

In our special case, we are using a button control (derived from an RWT Button on the Server side), where the appearance of the button (including states for hover, focus, disabled, comes from a dynamically generated bitmap.
I set this bitmap using setBackgroundImage( ). In order to specify the area of the bitmap to be shown, I use a remote Javascript call which applies a CSS class to the generated div and a CSS description like this:

.extbitbutton {background-repeat:no-repeat; background-position: 0% -0% !important; background-color:transparent !important; border-radius: 0px !important; border: none !important; }
.extbitbutton:hover {background-repeat:no-repeat; background-position: 0% -200% !important; background-color:transparent !important;}
.extbitbutton-focus {background-repeat:no-repeat; background-position: 0% -100% !important; background-color:transparent !important; border-radius: 0px !important; border: none !important;}
.extbitbutton-dis {background-repeat:no-repeat; background-position: left bottom !important; background-color:transparent !important; border-radius: 0px !important; border: none !important;}

In order to make the button transparent, we use the background-color override in this CSS.

We previously tested our development in IE and mostly Firefox, where this works fine. In Chrome, due to the combination of setBackgroundImage and implicit background gradient, this does not work: The button still has a white background (probably from the gradient) even though the background color is transparent.
The RAP API does not allow to unset the gradient, because that would mean a setBackgroundImage call, which would also unset the bitmap.

Wouldn't it be possible to remove the background-gradient if a background image has also been set?

Kind regards,
Gunnar Adams

Attachment: invalidproperty.png
(Size: 19.07KB, Downloaded 160 times)

Report message to a moderator

Re: Problem with background color on Chrome [message #1752599 is a reply to message #1752428]

Wed, 25 January 2017 14:47

Ivan Furnadjiev

Messages: 2426
Registered: July 2009
Location: Sofia, Bulgaria

Senior Member

Hi,
"background-image" and "background" (gradient) are independent properties. You could try to unset the "background" property yourself. See RAP developers guide how to set an HTML attribute as an example [1]. You can use "css" instead of "attr" [2] in order to change any CSS property.

[1] https://eclipse.org/rap/developers-guide/devguide.php?topic=scripting.html#html
[2] http://download.eclipse.org/rt/rap/doc/3.1/guide/reference/jsdoc/symbols/%24.html#css

HTH,
Ivan

Report message to a moderator

Re: Problem with background color on Chrome [message #1752610 is a reply to message #1752599]

Wed, 25 January 2017 15:20

Gunnar Adams

Messages: 49
Registered: May 2016

Member

OK, thanks.
I will try that.

Best regards,
Gunnar

Report message to a moderator

Re: Problem with background color on Chrome [message #1752629 is a reply to message #1752610]

Wed, 25 January 2017 16:19

Gunnar Adams

Messages: 49
Registered: May 2016

Member

Sorry for coming back to this issue.

From the developer tools in Chrome I see, that the gradient is in fact a CSS background-image property. Same as the actual image I set with setBackgroundImage.
So there is a conflict between those two properties.
"background" is a compound property which should contain either a background image OR a gradient, not both. in _pushBackgroundGradient the background gradient is only set, if no backgroundImage has been set.

In my opinion, the gradient implementing the background color should not be set, if a background image has been set.
I tested this with the following fix in Style.js:

_pushBackgroundColor : function( target, backgroundArray ) {
var value = target.___rwtStyle__backgroundColor;
if( value ) {
if( ( Client.isWebkit() || Client.isBlink() ) && !target.___rwtStyle__backgroundGradient && !target.___rwtStyle__backgroundImage ) {
backgroundArray.push( this._getGradientString( [ [ 0, value ], [ 1, value ] ] ) );
}
backgroundArray.push( value );
}
},

Any chance that this could make it into RAP?

Thanks and best regards,
Gunnar

Report message to a moderator