{ "id": "170239", "key": "TIMOB-25486", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "2", "description": "The problem described is an issue which will never be fixed.", "name": "Won't Fix" }, "resolutiondate": "2018-03-13T21:51:56.000+0000", "created": "2017-11-07T03:26:45.000+0000", "priority": { "name": "None", "id": "6" }, "labels": [ "escalation" ], "versions": [ { "id": "19906", "description": "", "name": "Release 6.3.0", "archived": false, "released": true, "releaseDate": "2017-11-01" } ], "issuelinks": [], "assignee": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2018-08-02T22:20:03.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10202", "name": "Android", "description": "Android Platform" } ], "description": "h6.Reproduce\r\n1. Use the following simple code in an alloy project.\r\n{code:title=index.xml}\r\n\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\r\n{code}\r\n\r\n{code:title=index.js}\r\nfunction onWinOpen() {\r\n\r\n\ttempImageFile1 = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, 'GetImage1.png');\r\n\r\n\tTi.API.info('onWebViewLoad', JSON.stringify(tempImageFile1));\r\n\timageStyle = ' height:100%;position:absolute;';\r\n\t\r\n\thtml = \"

\";\r\n\r\n\t$.captureImg1.setHtml(html);\r\n\r\n}\r\n\r\n$.index.open();\r\n{code}\r\n1. Copy of project [Project|https://axwaysoftware-my.sharepoint.com/personal/vvazquezmontero_axway_com/_layouts/15/guestaccess.aspx?guestaccesstoken=WJWavnEh%2FAB2TFgwpO%2F%2B2eWLqXIxCVFdDv0da%2B3CD%2BE%3D&docid=2_1c7c4f16fc811463ba1dd911690e841c8&rev=1&e=fea122bfeb73428a85d25f37ce421f83]\r\n2. Run the project in an android device.\r\n3. You will see the image doesn't show-up.\r\n\r\nh6.Note\r\n1. This is only happened in SDK 6.3.0.GA\r\n2. It is working well in SDK 6.2.2.GA", "attachment": [], "flagged": false, "summary": "Android: html styles not getting applied correctly in WebView in SDK 6.3.0.GA", "creator": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "subtasks": [], "reporter": { "name": "sliang", "key": "sliang", "displayName": "Shuo Liang", "active": true, "timeZone": "Asia/Harbin" }, "environment": "CLI 6.3.0\r\nSDK 6.3.0\r\nAndroid 6.0", "closedSprints": [ { "id": 1058, "state": "closed", "name": "2018 Sprint 16 SDK", "startDate": "2018-07-29T22:26:06.486Z", "endDate": "2018-08-12T22:26:00.000Z", "completeDate": "2018-08-13T17:38:16.757Z", "originBoardId": 114 } ], "comment": { "comments": [ { "id": "430326", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I attempted to simplify the test case provided and couldn't see any issues?\r\n\r\n{code:js}\r\nvar win = Ti.UI.createWindow(),\r\n webView = Ti.UI.createWebView(),\r\n img = Ti.Filesystem.getFile('appicon.png');\r\n\r\nwin.addEventListener('open', function () {\r\n webView.setHtml(\"

\");\r\n});\r\n\r\nwin.add(webView);\r\nwin.open();\r\n{code}", "updateAuthor": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-08T21:50:35.000+0000", "updated": "2017-11-08T21:51:01.000+0000" }, { "id": "430328", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Let me try that and will share with customer after tested. \r\nBest regards, \r\nVictor Montero", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-08T22:09:12.000+0000", "updated": "2017-11-08T22:09:12.000+0000" }, { "id": "430361", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~gmathews] Per the customer \r\nIn the index.js of the attached app, they added the comment \" run with 6.3.0 sdk. The image won't appear and if you remove position it shows the image but looks odd\". \r\n\r\nSo mentioned that the image appears when position is removed. \r\n\r\nInstead of making it work with position:absolute, you have removed it and it works. \r\nThey want to be able to make it work with their existing code as it did in 6.2.2 GA\r\nSo far I've been able to reproduce this behavior.", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-09T21:10:20.000+0000", "updated": "2017-11-09T21:10:20.000+0000" }, { "id": "430522", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~vvazquezmontero] This looks like an issue with Chromium (used by WebView) instead of Titanium.", "updateAuthor": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-11-13T18:22:23.000+0000", "updated": "2017-11-13T18:22:23.000+0000" }, { "id": "431623", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~vvazquezmontero] [~rramirez] I believe this is a HTML issue. I don't have the full use-case used in your app, but {{position: absolute}} is positioned relative to the nearest positioned ancestor instead of the viewport and it's dimensions do not alter the dimensions of the parent. I think using percentage values for the {{height}} could be causing the issue. For images, ideally you would use absolute values (e.g: {{width: 200px; height: 200px;}}). You could also remove {{height: 20%}} to let the browser decide.", "updateAuthor": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-01T22:45:26.000+0000", "updated": "2017-12-01T22:45:26.000+0000" }, { "id": "431625", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Thank you for the detailed explanation. I will try that on my end and then share with ABC to see if they would be able to remove the Height percentage to make it work ", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-01T23:18:08.000+0000", "updated": "2017-12-01T23:18:08.000+0000" }, { "id": "432041", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~gmathews] Hey Gary, I provided them the two options to resolve the issue but they came back with the explanation of why they needed to implement as they have. Below is there response, is there anything we can share with them to work around this issue? \r\n\r\n\"The use case we have is to load an image into an imageView.\r\nThe image view should occupy 65% of the window.\r\n If the image height is greater than width, we want the image height to occupy the entire imageView and size the width according and if the width is greater than height , we want the image width to occupy the entire imageView and size the height accordingly.\r\n\r\nThe main reason why we had to go for webView instead of image view is because of the absence of pinch to zoom in android imageView similar to iOS. Even the third party modules we tried were very bad.\r\n\r\nSo, we are loading the image into the webView as a html.\r\nWe are using height 100% if height>width and width 100% if width>height and using position:absolute to occupy the maximum area in the webView as mentioned in the use case.\r\n\r\nWe cannot use absolute values here as using them will change the height occupied by the image in different resolutions.\r\nWe have a percentage for the web view in the window and we want to image to occupy the full height or width of the webView based on its dimensions.\r\n\r\nLet us know, if there is different way to solve this issue.\"\r\n\r\nIs there a work around we could provide them for this use case? I've tried with SDK 7.0.0 GA and the image still does not load as it did with SDK 6.2.2 GA", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-12T18:10:32.000+0000", "updated": "2017-12-12T18:12:46.000+0000" }, { "id": "432242", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~vvazquezmontero] There's a couple of things they could try:\r\n\r\n1. Use the {{pinch}} event:\r\n{code:js}\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: 'gray'\r\n }),\r\n view = Ti.UI.createScrollView({\r\n backgroundColor: 'red',\r\n top: 0,\r\n width: Ti.UI.FILL,\r\n height: '65%'\r\n });\r\n img = Ti.UI.createImageView({\r\n bubbleParent: true,\r\n image: 'android/appicon.png',\r\n width: Ti.UI.FILL\r\n });\r\n \r\nview.addEventListener('pinch', function (e) {\r\n var offset = e.scale * e.velocity * 10;\r\n img.width = img.rect.width + offset;\r\n img.height = img.rect.height + offset;\r\n});\r\n\r\nview.add(img);\r\nwin.add(view);\r\nwin.open();\r\n{code}\r\n\r\n2. Attempt to amend the HTML style:\r\n{code}\r\nstyle='max-width: 100%;max-height: 100%;width: auto;height: auto;'\r\n{code}", "updateAuthor": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-15T22:32:02.000+0000", "updated": "2017-12-15T22:32:02.000+0000" }, { "id": "432307", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~gmathews] Thank you. I've shared that information with the customer", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-18T20:54:03.000+0000", "updated": "2017-12-18T20:54:03.000+0000" }, { "id": "432411", "author": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~gmathews] Customer just shared that neither of these workarounds will work: \r\nbq. Thank you for the suggestions. But, none of them will work for us. \r\nbq. \r\nbq. 1 Use the pinch event: \r\nbq. \r\nbq. As scrollview can only be scrolled either horizontally or vertically, if we set it to vertical, we cannot scroll to right or left on the zoomed image to zoom it further at that specific place and vice versa. The overall zooming experience is very bad and it looks very artificial. This is the main reason why we went for web view instead of image view. \r\nbq. \r\nbq. 2. Attempt to amend the HTML style: \r\nbq. \r\nbq. Using this style, when the image's height is greater than width, will cause the image's width to occupy the entire web view and the height goes beyond the web view. Our requirement is to occupy the entire height and size the width accordingly. So, this wouldn't work. \r\nbq. \r\nbq. If the image's width is greater than height, it occupies the entire width and height gets sized accordingly as per our requirement. But, the image is not centered and it cornered towards top. This is the reason why we had to use position absolute so that the image is centered relative to the web view. \r\n\r\nLet me know if there is anything we can do for them as they keep stating this is a blocker for them. \r\n", "updateAuthor": { "name": "vvazquezmontero", "key": "vvazquezmontero", "displayName": "Victor Vazquez Montero", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-12-19T18:32:42.000+0000", "updated": "2017-12-19T18:32:42.000+0000" }, { "id": "432703", "author": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~gmathews] Please prioritize this.", "updateAuthor": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2018-01-03T22:42:22.000+0000", "updated": "2018-01-03T22:42:22.000+0000" }, { "id": "432708", "author": { "name": "gmathews", "key": "gmathews", "displayName": "Gary Mathews", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~sliang] [~morahman] [~vvazquezmontero] Here's another workaround they could try:\r\n\r\n{code:js}\r\nvar win = Ti.UI.createWindow(),\r\n webView = Ti.UI.createWebView(),\r\n img = Ti.Filesystem.getFile('android/appicon.png').read();\r\n\r\nwin.addEventListener('postlayout', function () {\r\n if (img.height > img.width) {\r\n // NOTE: 97% to prevent slight vertical scroll\r\n var style = 'width:auto;height:97%';\r\n } else {\r\n var style = 'width:100%;height:auto';\r\n }\r\n webView.setHtml(\"