Question: So at the moment I am doing some iPhone and iPad testing and noticed a very annoying bug in relation to scrolling. So at the moment I have my basic page like so:

```
<body>
<div>
 Content of my website...
 <button>This button uses jQuery to add a class to the fixed-form div</button>
</div>
<div class="fixed-form">
 <form>
 </form>
</div>
</body>

```

This is a very basic HTML example that show my basic content area inside the body however I also have a div called `fixed-form`, when the button is pressed in the content area this then adds a class with the following styling to the `fixed-form` div:

```
  z-index:0;
  color:#fff;
  position: fixed;
  height: 100% !important;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overflow-x:hidden;
  top:0;
  width:100%;
  z-index:999 !important;

```

The `fixed-form` div then covers the viewport. The issue is that the content/body behind the `fixed-form` is still scrollable and elements are still clickable. Surely the z-index would have stopped this from happening however it has not. Any idea why this might be happening? I would just like to completely disable all of the content that is not the `fixed-form` div to be disabled from scrolling and clickable.

UPDATE: So far I have tried adding overflow:hidden to the content div however this does stop horizontal scrolling but does not effect the vertical scrolling issue.

Thanks

Answer: 
Is your image too large? Try uploading smaller images (a few 100 KBs in size). If that works, try compressing, or reducing the resolution of the image before encoding it. Here is an example: <https://stackoverflow.com/a/20382559/1237117>

Another option is to increase the json size limit at your Web API. 

```
<configuration> 
   <system.web.extensions>
       <scripting>
           <webServices>
               <jsonSerialization maxJsonLength="50000000"/>
           </webServices>
       </scripting>
   </system.web.extensions>
</configuration> 

```
Try doing a request first to get an empty object from the backend. Set the properties of the object in javascript, and send the modified object back to the server.

```
$scope.model = {};

$http.get(apiPath).then(function(result){
    $scope.model = result.data;
});

$scope.model.EncodedImage = base64ImageString;
$scope.model.Name = "Rajiv";

$http.post(apiPath, $scope.model).then(function(result){
    // ...
});

```

Also remove `[FromBody]` in the backend, and `string` in your `UserInfo` class should be written with a small letter.