Fix: CSS scale breaks background properties on iOS

Resolves #2911

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);
+}

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>

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);
+    }
+}

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>

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");

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 boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
-        let boundsHeight = frame.size.height;
+        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) {