[TIMOB-10231] MobileWeb: BackgroundGradient shows solid color

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Closed
Resolution	Won't Fix
Resolution Date	2017-06-29T18:41:34.000+0000
Affected Version/s	Release 3.0.0, Release 3.4.1
Fix Version/s	n/a
Components	MobileWeb
Labels	api, parity
Reporter	Karl Rowley
Assignee	Chris Barber
Created	2012-07-30T09:27:27.000+0000
Updated	2018-04-04T23:20:33.000+0000

Description

Attachments

File	Date	Size
ios.png	2012-08-15T11:42:31.000+0000	126362
mobileweb.png	2012-08-15T11:42:31.000+0000	44664

Comments

Bryan Hughes 2012-07-30

Which browser are you running on? This is a known issue on IE9, but if this occurring in a different browser, then this must be a new issue.
Karl Rowley 2012-07-30

I'm using Chrome 20.0.1132.57 on MacOS.

Dustin Hyde 2012-08-15

I am seeing this issue with the sample code from the api docs website. According to the documentation, MobileWeb supports background gradients. There is no console output. Titanium Studio: 2.1.1 Titanium SDK: 2.1.1, 2.1.2.v20120815081613 OS: Mountain Lion Browsers Tested: Chrome 21.0.1180.75, Firefox 14.0.1, Safari 6.0 (8536.25) API Docs URL: http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.UI.Window-property-backgroundGradient Sample Code:

   var win1 = Titanium.UI.createWindow({
           title:'Tab 1',
           backgroundColor:'#fff',
           layout: 'vertical'
       });
       
       var radialGradient = Ti.UI.createView({
           top: 10,
           width: 100,
           height: 100,
           backgroundGradient: {
               type: 'radial',
               startPoint: { x: 50, y: 50 },
               endPoint: { x: 50, y: 50 },
               colors: [ 'red', 'blue'],
               startRadius: '90%',
               endRadius: 0,
               backfillStart: true
           }
       });
       var linearGradient = Ti.UI.createView({
           top: 10,
           width: 100,
           height: 100,
           backgroundGradient: {
               type: 'linear',
               startPoint: { x: '0%', y: '50%' },
               endPoint: { x: '100%', y: '50%' },
               colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ],
           }
       });
       win1.add(radialGradient);
       win1.add(linearGradient);
       win1.open();

Dustin Hyde 2012-08-15

Android radial gradients are not implemented: TIMOB-9366

Michael Stelly 2014-11-25

I wanted to update this ticket with an observation. The following works, but does not appear consistent with how one declares a global property. If I set the config value to ONLY the property definitions:

   		radioButtonUnselectedBG : {
   			type : 'linear',
   			startPoint : {x : '50%',y : '0%'},
   			endPoint : {x : '50%',y : '100%'},
   			colors : [
   				{color : '#727272',offset : 0.0},
   				{color : '#3e3e3e',offset : 0.75}
   				]
   		},

I can then set the backgroundGradient property of a given UI element, for example: button.backgroundGradient = Alloy.Globals.colors.radioButtonSelectedBG

Lee Morris 2017-06-29

Resolving ticket as "Won't fix" as MobileWeb has been deprecated.
Eric Merriman 2018-04-04

Closing as will not fix.

JSON Source