Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9191] iOS: Ti.UI.View backgroundLeftCap backgroundTopCap Broken on Retina Displays

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-07-19T09:43:04.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sSprint 2012-14 API, Release 3.0.0
ComponentsiOS
Labelsapi, module_views, qe-testadded
ReporterDawson Toth
AssigneeVishal Duggal
Created2012-05-22T12:16:53.000+0000
Updated2013-07-19T09:43:04.000+0000

Description

Problem

The backgroundLeftCap is broken on Ti.UI.Views on Retina displays. It works fine on Ti.UI.Buttons.

Reproduction

Drop the following in an app.js, and download the two attached images. Note that the two search.png and search@2x.png images are color coded so you can see that it is consistently using the @2x image on the Retina device, it's just messing up (miscalculating?) the stretching somehow.
var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});
// WORKS: buttons backgrounds stretch properly on Retina displays!
win.add(Ti.UI.createButton({
    top: 10, right: 10, left: 10,
    height: 30,
    // "search.png" is:
    // - On Non-Retina: 35x30
    // - On Retina: 70x60
    backgroundImage: 'search.png',
    // 35 / 2 = 17.5, so use 17, 34 pixels for the edges, with 1 pixel to repeat in the middle.
    backgroundLeftCap: 17
}));
// FAILS: ends up distorted on the left and right caps on Retina displays!
win.add(Ti.UI.createView({
    top: 50, right: 10, left: 10,
    height: 30,
    backgroundImage: 'search.png',
    backgroundLeftCap: 17
}));
win.open();

Workaround

Use buttons with their touch disabled as backgrounds. Weird, a bit heavier, but... whatever.

Screenshot

Attached as well.

Attachments

FileDateSize
iOS Simulator Screen shot May 22, 2012 2.13.39 PM.png2012-05-22T12:16:53.000+000020826
search.png2012-05-22T12:16:53.000+00001006
search@2x.png2012-05-22T12:16:53.000+00003810

Comments

  1. Vishal Duggal 2012-07-05

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/2510
  2. Anshu Mittal 2013-07-19

    Reopening to update labels:
  3. Anshu Mittal 2013-07-19

    Verified with: SDK:3.1.2.v20130718094558 Appcelerator Studio: 3.1.2.201307121651 OS: OSX 10.7.5 Device:iPhone5(ios6) Xcode: 4.6

JSON Source