Embedded Windy at bottom of page doesn't come up centered properly.

Lord Beowulf

Hi,

First off, thanks for a really cool service. I came across this about a month ago when looking to jazz up my observatory's weather page a bit. I've embedded the provided frame code below another linked image from NOAA GOES. You can see the result at https://weather.orionranchobservatory.com/extras.htm. The problem that you should encounter is that when you scroll down to the Windy frame, it's centered in Oklahoma instead of Central Texas. If you refresh the page while viewing the Windy frame, then it will center properly and you see the icon highlighting the location. I'm guessing that this has something to do with an interaction between the visible window and the scrolled location, but don't know if there's an HTML way for me to fix it vs. something with the linked data itself that would need to be fixed.

Thanks for any guidance,

Beo

micpalmia

Have you found a solution to this? If the iframe (with detail=true) is not in the view when the page loads and users scroll down, the iframe loads while users are scrolling and the auto-centering does not work.

I specify width and height in the call, so not sure why auto-centering is needed at all.

Any suggestions more than welcome!

micpalmia

Sorry for the double post but couldn't seem to be able to edit the previous.

This does not happen on Safari, and here is a jsfiddle in case it's of any use:
https://jsfiddle.net/vm4e78j3/5/

rittels

@Lord-Beowulf

workaround hack for you:


< iframe style="border:0px; position:fixed; left:0px; top:0px; opacity:0.01"  onload="setTimeout(()=>{this.style.position='relative';  this.style.opacity=1},1000)" width="650" height="800" src="https://embed.windy.com/embed2.html?lat=30.69&lon=-98.1&zoom=7&level=surface&overlay=wind&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&detailLat=30.69&detailLon=-98.1&metricWind=default&metricTemp=default&radarRange=-1" >< /iframe>