I am have a problem scaling the Google Earth player in Mac/Chrome using CSS transform.
In Mac/Chrome it scales double the amount it should.
$("#playerDiv").css({ "-webkit-transform-origin":"0 0",
"transform-origin":"0 0",
"-webkit-transform":"matrix("+playerZoom+",0,0,"+playerZoom+",0,0)",
"-transform":"matrix("+playerZoom+",0,0,"+playerZoom+",0,0)",
});
You can see it fail here:
www.viseyes.org/mapscholar/mapedit.htm
Drag the slider bar to the left of the "File" menu item. Earth scales about half of what it should.
Works everywhere else, including Win/Chrome.
Google, in its infinite wisdom has discontinued the GE plug-in in Chrome, so this is a moot issue.
Related
I have an image hosted on Amazon S3 that is being flipped from portrait to landscape when put inside a completely unstyled <img> tag.
Chrome shows it as horizontal in the page: http://imgur.com/kJNzNQG,PgJPUsm#0
But when I open in new tab it displays as portrait. http://imgur.com/kJNzNQG,PgJPUsm#1
Results:
wget: returns a vertical image.
All Browsers inside image tag: horizontal
Chrome, safari, FF in new tab: vertical
IE new tab: horizontal
I cannot directly link to image samples because they are profile photos of users and confidential.
Has anyone encountered this before? How can we identify if the true image is vertical or horizontal, and why is it being auto-rotated in some places but not others?
Sometimes EXIF data will store a orientation for the picture. Some software will process this and show you the properly rotated version, while other software will ignore it and show you the picture's 'native' rotation. To add further complexity, I have found that my cell phone is less reliable in setting this orientation flag correction.
More information on the EXIF orientation flag -> http://www.impulseadventure.com/photo/exif-orientation.html
Online EXIF reader -> http://regex.info/exif.cgi
I'm currently developing a webpage containing a map based on Google Map Api V3 : http://www.fairaidsyria.org
I have two overlays containing polygons that appear successively as the user zooms in..
Unfortunately, annoying "white flashes" occur when zooming. The problem even occurs at max zoom levels, when both overlays are not displayed...
The blinking seems to be directly related to the presence of polygons in the zoomed area, because if you try to zoom somewhere else in the world (area without polygons), everything works fine : no flashes.
I suspect this phenomena to be "native" and not related to a mistake I could have done. In fact, the same flashes also happen when you zoom in the triangle in the following official example : https://developers.google.com/maps/documentation/javascript/examples/polygon-simple?hl=en
Did someone find a way to solve this?
based on this good article change your meta viewport tag to:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
I set up a Google Maps v3 at our website at http://wallawalla.tk/services and I encounter a minor distortion issue. That is, if you look at the map very precisely, you'll see that there are random "white/gray stripes" appearing. Most important at the very left side of the map and especially when opening InfoWindows respectively closing them. It appears that "white/gray stripes" are somehow related to the border of the InfoWindow, i.e. it seems that if one of the borders doesn't show up (most of the time at the very left side of the respective InfoWindow), there is a random "white/gray stripe" appearing near or even through the InfoWindow. Unfortunately this isn't reproducible 100% of the time which makes it even more suspicious to me. Please try to open/close some of the InfoWindows to actually see it. I guess it is somehow related to our CSS. I read a lot about related distortions but nothing seem to fit my specific case. The "white/gray stripe" on the very left side of the map itself is reproducible almost 100% of attempts trying to reproduce. All "white/gray stripes" are 1px in width and they disappear if you either pan the map or scroll it out and back into the viewport of the Browser window. I'm testing with Google Chrome 22.0.1229.79/Webkit.
Doesn't seem to affect FF11.0/Gecko. Tried it just yet and while Chrome shows described behaviour, FF doesn't
My guess is that it is being caused by OverlappingMarkerSpiderfier. Can you build a simple test that displays your points and InfoWindows without using OMS and see if you still have the issue?
I have a conceptual question about photo galleries like this:
http://www.nikesh.me/demo/image-hover.html
If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.
This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.
So, normal images are first scaled down:
-webkit-transform:scale(0.8);
And then upon hover scaled up:
-webkit-transform:scale(1.2);
My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.
What I want:
The full effect in browsers that support it. Important is that the zoomed version remains quality.
No effect at all for browsers that do not support it, yet a solid original dimension so that no layout is broken
It should work for both image orientations and there may be variety in image widths and heights too
Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.
If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.
<img src="yourImageSrc" width="80%" height="80%">
This would allow you to still keep your layout in tact if the user agent is not up to date.
** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.
There are two occasions on my web page where I don't want Firefox to automatically scale the images when zooming in and out.
Can I circumvent this feature on these images specifically, and have the rest of the images zoom as normal in Firefox (if that's what the users has set in his/her preferences)?
There is no way to mark or otherwise prevent an image from being zoomed when the user requests zooming.
You could use window.onresize and detect the zoom amount using one of the techniques described at Detecting Page Zoom in Firefox 3 (And Others). Once you know the zoom amount, you could apply that percentage adjustment to the images you want to leave at a fixed size.
The whole thing is a house of cards though. The JavaScript-only solution does not detect zoom amount when the page is first loaded, so you'll need a Flash component on the page just to detect the zoom amount. Also, the actual effect of the zooming will be jarring for the user. The image resizing will lag slightly behind the user's zoom setting, causing the page to reflow, possibly moving the content they were trying to zoom in on in the first place.