I wrote a script that takes rows of lat long data, image links, & other descriptors and plots those points with Folium. The images and other information are contained in popups, and the images load once the popup is opened. When I open the map files in Firefox, my images are scaled down appropriately:
Yet when other people open the maps in Chrome or Safari, the images are hyper-zoomed to the top left even though the browser receives the entire image properly:
I have tried injecting styling into the map html after creation, but it scales the broken image instead of properly displaying it. In the browser inspector, I have seen mention of a "user agent stylesheet", but my search for a way to control that has not been successful. My questions:
- What is causing this loading behavior in non-Gecko browsers?
- How can I control how the content of these Iframes renders across browsers?
The css that fixes this:
<style>
#img-frame {
transform: scale(1);
-ms-zoom: 1.0;
-moz-transform: scale();
-moz-transform-origin: 0 0;
-o-transform: scale(1);
-o-transform-origin: 0 0;
-webkit-transform: scale(1);
-webkit-transform-origin: 0 0;
}
</style>