Scrolling to element in guest via Element.scrollIntoView() does not work in Safari with cross origin domains #8
Description
If the parent and guest are hosted on different domains (or ports), scrolling to element in guest via Element.scrollIntoView() does not work.
This does not seem to be related to Sidechain as I have reproduced in a very simple demo without loading Sidechain at all. The reason I am posting here is just in case someone has a trick to make it work or at least so the documentation can be updated to reflect this and avoid hours of debugging ;)
parent.html - served at http://localhost:1234 using serve -l 1234 for easy local testing
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe seamless="true" scrolling="no" src="http://localhost:6789/guest.html" height="3000"></iframe>
</body>
</html>
guest.html - served at http://localhost:6789 using serve -l 6789 for easy local testing
<!DOCTYPE html>
<html>
<head>
<title>Guest Document</title>
<style>
body, html {
height: 3000px;
margin: 0;
padding: 0;
}
.red-div {
width: 100px;
height: 100px;
background-color: red;
margin: 20px auto;
}
#scrollButton {
position: fixed;
bottom: 20px;
left: 50%;
}
</style>
</head>
<body>
<div class="red-div"></div>
<button id="scrollButton" onclick="document.querySelector('.red-div').scrollIntoView();">Scroll to Top</button>
</body>
</html>
Firefox + Chrome: Scroll down and click button. You will get scrolled to top
Safari: Scroll down and click button. Nothing happens...
It would be amazing if someone knew how to make this work. If not, I am working on a solution that calculates offsets and passes messages between child/parent but I would love to avoid that if possible.
Thank you for your time.