Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
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)
Problem with background color on Chrome [message #1752268] Fri, 20 January 2017 13:02 Go to next message
Gunnar Adams is currently offline Gunnar AdamsFriend
Messages: 21
Registered: May 2016
Junior 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
Re: Problem with background color on Chrome [message #1752270 is a reply to message #1752268] Fri, 20 January 2017 13:28 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2275
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
Re: Problem with background color on Chrome [message #1752428 is a reply to message #1752270] Mon, 23 January 2017 17:00 Go to previous messageGo to next message
Gunnar Adams is currently offline Gunnar AdamsFriend
Messages: 21
Registered: May 2016
Junior 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
Re: Problem with background color on Chrome [message #1752599 is a reply to message #1752428] Wed, 25 January 2017 14:47 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2275
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
Re: Problem with background color on Chrome [message #1752610 is a reply to message #1752599] Wed, 25 January 2017 15:20 Go to previous messageGo to next message
Gunnar Adams is currently offline Gunnar AdamsFriend
Messages: 21
Registered: May 2016
Junior Member
OK, thanks.
I will try that.

Best regards,
Gunnar

Re: Problem with background color on Chrome [message #1752629 is a reply to message #1752610] Wed, 25 January 2017 16:19 Go to previous messageGo to next message
Gunnar Adams is currently offline Gunnar AdamsFriend
Messages: 21
Registered: May 2016
Junior 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
Re: Problem with background color on Chrome [message #1752693 is a reply to message #1752268] Thu, 26 January 2017 08:42 Go to previous message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2275
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi,
please open a bugzilla with a simple snippet/project to demonstrate the issue. We'll analyze it and will track the progress there.
Thanks, Ivan
Previous Topic:UISession not closed
Next Topic:Sending Data to RAP Application
Goto Forum:
  


Current Time: Mon May 21 13:19:32 GMT 2018

Powered by FUDForum. Page generated in 0.02034 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top