Can't click fixed position element on mobile safari

Question

I am aware of the partial support of fixed elements on mobile but was wondering if such a simple example like this should be broken?

Trying this on mobile safari, iOS8 - iPhone 6

I have a fixed position element like so...

.circle {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 55px;
    text-align: center;
    font-size: 12px;
    background-color: red;
    bottom: 100px;
    left: 10px;
    position: fixed;
}

On mobile safari the click event isn't fired. I'm using jQuery's 'on' method like so...

$('.circle').on('click', function() {
    console.log('hello');
});

The only way I can get this click to trigger is by pinch zooming and then trying to click the element again (weird).

Answer 1

In order to fix this you need the meta tags like so

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">

The system I was using was appending the meta tags into the HTML which doesn't seem to work for the viewport meta tag.