Workaround for iframe / mousewheel error in Safari 6.1 / 7.0

Question

I found an error affecting Safari 6.1 and 7.0 (this is good in Safari 5.1 and 6.0). I reported this to Apple.

Test case: http://tremby.net/dump/iframe-safari/

The code is very simple. The parent page has only an iframe, and the iframe has a listener for the mousewheel event, which raises a warning. The contents of the iframe are smaller than the iframe itself (more on this later).

If you refresh this page by clicking on the location bar and pressing the enter key, the mousewheel events in the iframe will not fire (you do not see any warnings). But if you update using the refresh button, they will.

I need a workaround for this.

We already found that the contents of the iframe overflow the boundaries of the iframe. Mousewheel events are now triggered, but it is unacceptable to have a scroll bar and move content. (It doesn't matter why the choice of using iframe at all is not for me.)

Any ideas?

Answer 1

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

Adding the following CSS to the iframe content triggers events.

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

The scroll bar is not yet displayed, since the default is the size model of the window size, and the width is 100%, which means that the fill pixel is filled from the right edge, which is hidden.

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

Answer 2

Incredible that this feature still present in Safari 8.

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

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

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