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 map in question
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>
Related
I have built this awesome css only loader and everything is working fine except in Internet Explorer. For some reason, IE feels as if it needs to constantly shake. When it comes down to it all I'm doing is a simple keframe animation like this:
#keyframes loading
0%
transform: scale(1)
50%
transform: scale(1.2)
100%
transform: scale(1)
Here is my CodePen for the loader: http://codepen.io/MrGrigri/pen/zxWQdb
Also, here is the blog associated with it: http://codepen.io/MrGrigri/blog/responsive-loader/
In all of the other browsers its working like a champ...just not IE.
I'm testing it in IE Version 11.0.16 on Windows 8.1
Thanks for the help
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11.
I have a web page built in ASP.NET MVC that uses fixed positioning to allow users to always see the row headers when scrolling.
When using Internet Explorer 9 the fixed elements disappear and reappear from view when scrolling. I have tested in Chrome and it works correctly there. I have also made sure that IE is using standards mode and not quirks.
This jsfiddle demonstrates my problems: http://jsfiddle.net/zache/43zCf/
Doesn't fit the character limit.
The parents of the z-indexed elements are not positionned.
You have to add to table position: inherit;
so the css for table will be :
table {
position: inherit;
white-space: nowrap;
border-collapse: collapse;
}
This worked for me.
Solution 1:
Add scrollbars on page load then remove them a short time after.
Sys.Application.add_load(function(){
if ($.browser.version == 9 && $.browser.msie) {
$('html').css('overflow-y','scroll');
setTimeout(function () {
$('html').css('overflow-y','auto');
}, 10);
}
})();
Solution 2
Set document mode to ie8 in web.config:
<add name="X-UA-Compatible" value="IE=8"/>
I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
I've been developing a website for my FIRST robotics team. However, recently a horizontal scrollbar has appeared which seems to have no explanation. No elements protrude past the edge of the page, and it works fine in IE. I can fix it with body { overflow-x:hidden ) but I'd rather find the true culprit. Any help would be appreciated. The site is wordpress-based, and can be found here.
Here is the reason on line 22 vender-extension-style.css
try to remove this
#header-cut-out {
-moz-transform: skew(-45deg);
}
line 28 vender-extension-style.css below css on img tag
#header-cut-out img {
-moz-transform: skew(45deg);
}
your scroll will remove and you have to work on it to get the desired output.
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here
I've been trying to apply a transform rule to some elements which also have a #font-face font applied to them.
h1 {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
When this transform rule is applied, I get the rotation I'm after, but the text does not appear correctly — although it's rotated, it's as though each character is bound to an origin which sits on a pixel, and so the line of text looks jagged.
If I simply replace the font with a system font, the problem goes away, so would appear to be related to the use of #font-face. I've tested it in a variety of browsers on OS X and Windows, and they all show similar results.
Has anybody come across this problem before, or can anybody give any advice on why this might be occurring?
Check out the source for this experiment.
It uses #font-face with rotate as well as some other nifty CSS3 effects.
Add these styles to <h1> element:
-webkit-backface-vivbility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;