CODEWITHSUNDEEP
javascripthtmlsafari
tremby
tremby

Reputation: 10079

Workaround for iframe/mousewheel bug in Safari 6.1/7.0

I've found a bug affecting Safari 6.1 and 7.0 (it is fine in Safari 5.1 and 6.0). I've reported it to Apple.

The test case is here: http://tremby.net/dump/iframe-safari/

The code is very simple. The parent page just has an iframe, and the iframe has a listener for the mousewheel event which fires an alert. The iframe's contents are smaller than the iframe itself (more on that later).

If you refresh this page by clicking in the location bar and pressing enter, the mousewheel events in the iframe will not fire (you see no alerts). But if you refresh with the refresh button they will.

What I need is a workaround to this.

One we have already found is to make the iframe's contents overflow the iframe's bounds. Mousewheel events now fire, but it's not acceptable to have a scrollbar and the contents moving. (Never mind why the choice of using an iframe at all -- that's not up to me.)

Any ideas?

Upvotes: 6

Views: 1285

Answers (2)

daniel.sedlacek
daniel.sedlacek

Reputation: 8649

Unbelievably this feature is still present in Safari 8.

I found great workaround here: https://bugs.webkit.org/show_bug.cgi?id=124139

Simply add onmousewheel="" attribute to the iframe tag.

<iframe src="..." onmousewheel=""></iframe>

Upvotes: 6

tremby
tremby

Reputation: 10079

I found a workaround which is acceptable in my use case.

Adding the following CSS to the iframe contents makes the events show up.

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
}
body {
    padding-right: 1px;
    overflow-x: hidden;
}

No scrollbar is shown since the content-box box sizing model is used by default and the width is 100%, which means the pixel of padding is overflowing off the right edge, which is hidden.

Example is at http://tremby.net/dump/iframe-safari-workaround/

Upvotes: 0

Related Questions