From 83e0ae4c85299c8481b8039cf00490221d11ca58 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Wed, 26 Oct 2016 15:36:37 +0300
Subject: [PATCH] Fix: CSS scale breaks background properties on iOS

Resolves #2911
---
 apps/app/ui-tests-app/issues/issue-2911.css   | 18 ++++++++++++++
 apps/app/ui-tests-app/issues/issue-2911.xml   |  7 ++++++
 apps/app/ui-tests-app/issues/main-page.ts     | 24 +++++++++++++++++++
 apps/app/ui-tests-app/issues/main-page.xml    |  6 +++++
 apps/app/ui-tests-app/mainPage.ts             |  1 +
 tns-core-modules/ui/styling/background.ios.ts |  6 ++---
 6 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/ui-tests-app/issues/issue-2911.css
 create mode 100644 apps/app/ui-tests-app/issues/issue-2911.xml
 create mode 100644 apps/app/ui-tests-app/issues/main-page.ts
 create mode 100644 apps/app/ui-tests-app/issues/main-page.xml

diff --git a/apps/app/ui-tests-app/issues/issue-2911.css b/apps/app/ui-tests-app/issues/issue-2911.css
new file mode 100644
index 000000000..39c96ff20
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/issue-2911.css
@@ -0,0 +1,18 @@
+Button {
+    background-color: red;
+    background-image: url('~/ui-tests-app/image-view/gravatar2.png');
+    background-position: center;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    width: 100;
+    height: 100;
+    margin-bottom: 100;
+}
+
+.scale-up {
+    transform: scale(2, 2);
+}
+
+.scale-down {
+    transform: scale(0.5, 0.5);
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/issue-2911.xml b/apps/app/ui-tests-app/issues/issue-2911.xml
new file mode 100644
index 000000000..29165f241
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/issue-2911.xml
@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+  <StackLayout>
+      <Button />
+      <Button class="scale-up" />
+      <Button class="scale-down"/>
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/main-page.ts b/apps/app/ui-tests-app/issues/main-page.ts
new file mode 100644
index 000000000..e9389bfc5
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/main-page.ts
@@ -0,0 +1,24 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    
+    examples.set("2911", "issues/issue-2911");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/issues/main-page.xml b/apps/app/ui-tests-app/issues/main-page.xml
new file mode 100644
index 000000000..33306f0d0
--- /dev/null
+++ b/apps/app/ui-tests-app/issues/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index ac94d6ae7..8e4f4a59a 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/apps/app/ui-tests-app/mainPage.ts
@@ -37,6 +37,7 @@ export function pageLoaded(args: EventData) {
     examples.set("segStyle", "segmented-bar/all");
     examples.set("flexBox", "flexbox/flexbox");
     examples.set("list-view", "list-view/list-view");
+    examples.set("issues", "issues/main-page");
 
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 165570e1c..0f280467b 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -162,8 +162,8 @@ export module ios {
         }
 
         let frame = nativeView.frame;
-        let boundsWidth = frame.size.width;
-        let boundsHeight = frame.size.height;
+        let boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
+        let boundsHeight = view.scaleY ? frame.size.height / view.scaleY : frame.size.height;
         if (!boundsWidth || !boundsHeight) {
             return undefined;
         }
@@ -180,7 +180,7 @@ export module ios {
             UIGraphicsEndImageContext();
         }
 
-        UIGraphicsBeginImageContextWithOptions(frame.size, false, 0.0);
+        UIGraphicsBeginImageContextWithOptions(CGSizeFromString(`{${boundsWidth},${boundsHeight}}`), false, 0.0);
         var context = UIGraphicsGetCurrentContext();
 
         if (background.color && background.color.ios) {