환경
OS: iOS 8.0 (12A365)
WebKit ver: 600.1.4
문제
1. Safari 는 문제가 없다.
2. UIWebView 만 문제 발생
1) iframe 내부에 스크롤이 있는경우 스크롤을 움직이면 Click or Touch Event 가 정상적으로 동작하지 않는다.
inner.html
<!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body, #wrap { margin: 0; padding: 0; } #wrap { width: 100%; height: 100%; text-align: center; } .box { width: 50%; height: 150px; display: inline-block; background-color: #e5a9bd; margin: 10px 0; } </style> </head> <body> <div id="wrap"> <div class="box" onclick="alert(1);">1</div> <div class="box" onclick="alert(2);">2</div> <div class="box" onclick="alert(3);">3</div> <div class="box" onclick="alert(4);">4</div> <div class="box" onclick="alert(5);">5</div> <div class="box" onclick="alert(6);">6</div> </div> </body> </html>
outer.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style type="text/css"> html, body { margin: 0; padding: 0; } #blur { position: absolute; width: 80%; height: 300px; background-color: rgba(0, 0, 0, 0.50);; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #contentHeader { width: 100%; height: 10%; background-color: #e5d099; font-size: xx-large; text-align: center; } #contentBody { width: 100%; height: 80%; overflow: scroll; -webkit-overflow-scrolling: touch; } #contentFooter { width: 100%; height: 10%; background-color: #92e59e; font-size: xx-large; text-align: center } #contentIframe { width: 100%; height: 100%; border: 0; background-color: white; } #blur { display: none; } .btn { border-top: 1px solid #353535; width: 100%; height: 30px; } </style> <script type="text/javascript"> $(document).ready(function() { var btn; for (var i = 0; i < $('.btn').length; i++) { btn = $('.btn').get(i); $(btn).bind('click', function(){ $('#blur').show(); }); } $('#contentFooter').bind('click', function() { $('#blur').hide(); }) }); </script> </head> <body> <div id="blur"> <div id="contentHeader">Title</div> <div id="contentBody"><iframe id="contentIframe" src="inner.html" ></iframe></div> <div id="contentFooter">Close</div> </div> <div> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> <button class="btn">button</button> </div> </body> </html>
원인
- 버그라고 밖에 예상할 수 밖에 없다. (iOS 8.0 & WebKit ver: 600.1.4) 인 경우..
조치사항
Scroll 을 Javascript 로 구현을 하니 정상적으로 Click or Touch Event 가 발생되는 것을 확인했다.
Scroll 을 Javascript 로 구현하는 방법은 이전에 작성한 포스트를 참고했다. => 링크
=====================================
2014.10.16 추가
결국에는 HTML, CSS 수정을 통해 javascript 를 이용하지 않고 매끄럽게 스크롤이 되도록 수정을 하긴 했는데 블로그에 글을 쓰기위해 샘플소스를 만들어보지만 샘플소스로 만들어서는 이슈가 해결이 되지 않아 아직 업데이틀 못하고 있다.
해결이 된 샘플소스를 만들게 되면 추후 업데이트 예정.
댓글
댓글 쓰기