New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Buttons inside an iframe are unclickable on iOS devices

Problem

Buttons inside iframe or RadWindow that have background image applied via CSS, become unclickable if the frame's content will get big enough to become scrollable. This seems to be a bug in iOS.

Steps to reproduce the issue:

  1. Create a div and place an iframe in it.

    <div class="frameContainer">
      <iframe src="pageWithLardeContent.aspx"></iframe>
    </div>
    
  2. Make the div element small

    .frameContainer {
      position: absolute;
      top: 50px;
      left: 50px;
      height: 400px;
      right: 50px;
      border: 1px solid red;
      overflow: auto;
    }
    
  3. Create another page that has large content and includes a button like the one below:

    .Button {
      background: url(someImage.png) blue;
    } 
    
    <input type="button" class="Button" value="Button" onclick="click()" /> 
    

    Include the following click event handler as well.

    function click() {
      alert('Button Clicked');
    } 
    

    Solution

Current solution is to remove the background image applied via CSS.

In this article