0

The code when run works fine in Firefox but when in Chrome- it doesn't work at all- the #agree element from iframe cannot be hidden. How to fix it for Chrome?

Here's my simplified code:

<iframe src="blank.htm"></iframe>

<button id="btn">Toggle</button>

<script>
frame = null;

$('iframe').load(function()
{
    frame = $('iframe').contents();
});

$('#btn').click(function()
{
    var div = frame.find('#agree');
    div.toggle();
});
</script>

<style>
iframe
{
    width: 600px;
    height: 1200px;
    transform: scale(0.5);
}
</style>

And here you can test it: http://nitton.pl/chrome/

Tom
  • 2,962
  • 3
  • 39
  • 69
  • Try looking at http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe?rq=1 – shaun Feb 12 '15 at 13:10
  • @ShaunLoftin If I remove transform: scale(0.5); from my style then it all works fine in Chrome and Firefox. Seems Chrome has a serious bug. – Tom Feb 12 '15 at 13:12

1 Answers1

0

The difference between chrome and firefox is that chrome uses -webkit-transform: browser engine and firefox doesn't.

Try using the webkit to make it work optimally on chrome browsers.

shaun
  • 1,017
  • 11
  • 22