Buttons inside an iframe are unclickable on iOS devices

RELATED TO:

AUTHOR: Attila Antal

DATE POSTED: September 18, 2018

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.

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.