iOS touch events not firing on floated elements inside a transformed parent

I was having some trouble with a carousel built with Siema, where drag to scroll was not working on iOS devices (both Chrome & Safari). At the time I needed a quick fix and found that adding a div with a non-integer amount of padding right above it fixed the issue…

I’ve now managed to produce a minimal example which doesn’t even require me to build a carousel:

HTML

<div class="touch-test">     <div class="wrapper">         <div class="item">           <a href="#">Click me</a>         </div>     </div> </div> 

CSS

.wrapper {   transform: translate3d(0px, 0px, 0px); }  .item {   float: left; } 

JS

const touchTest = document.querySelector('.touch-test'); touchTest.addEventListener('touchstart', () => alert('touched')); touchTest.addEventListener('click', () => alert('clicked')); 

Load this up in an iOS browser and the touch event doesn’t fire, even though the click event does.

The fix I initially found still works. Add <div style="padding-top:0.1px">fixer</div> on line 1 of the HTML and the touch event does indeed fire. An alternative solution I’ve since found is adding a clearfix to the .touch-test element.

Is this an iOS bug or am I misunderstanding something about how touch events work?

Also I can see why the clearfix works, as it gives some height to the touch target, but I’m dying to know why the padding thing fixes it, and why it’s got to be a non-integer number.

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.