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)
| |
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
|
|
| | |
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
|
|
| |
Goto Forum:
Current Time: Fri Apr 26 18:08:46 GMT 2024
Powered by FUDForum. Page generated in 0.03918 seconds
|