Placing Flash content above an image - javascript

I need to display Flash content, and I have an image that is "encasing" the Flash content, the image is a PNG with the center transparent.
In Windows 7 and FF and IE it works ok, in Chrome however the Flash content is non-interactive, like if it was rendering behind the image.
In Windows 8 only seems to work in FF, in IE is broken too.
Any ideas how to go around this?. Is there some kind of layer of depth I can set somewhere?.

Related

Images uploaded from mobile rotated in Chrome and Firefox on Desktop

I have this weird problem that if I upload an image from mobile to my website, the image will appear rotated on Chrome and Firefox desktop
It will appear in the right directions on the mobile browsers (Chrome mobile and Safari Mobile)
Seems like there was a CSS field (now deprecated) image-orientation: from-image. But seems not to work anymore
Other people suggest removing the EXIF info from the file, but that did not work either.
Did someone encounter the same problem?
The problem is in the EXIF data that iOS embed in the media.
If you process the media with Sharp, it will automatically process it and scrape it off.
Hope it helps anyone coming across this answer!

Why does IE10 Mobile render my in-canvas PNG incorrectly?

I'm using a "mask" image as an input, draw it to a canvas, then use getImageData to detect the colour of pixels.
This works perfectly under Safari, Chrome, Firefox, their mobile versions, and Android's stock Browser. It also works in IE11 (the only version I currently have as a Virtual Machine).
Under IE10 Mobile, its display is completely wrong.
I've put together a JSFiddle to demonstrate the problem. On a compatible browser, it should show two grids. The first is white and red (red is the mask colour I chose), and the second is the processed version; black and white.
Like so:
However, IE10 Mobile on Windows Phone 8 renders it completely wrong, sort-of like this:
(Ignore the JPEG artifacts, that's a side effect of sharing a screenshot).
The actual drawing code is extremely simple:
var source = document.createElement('canvas');
source.width = this.width;
source.height = this.height;
source.getContext('2d').drawImage(this, 0, 0);
body.appendChild(source);
As you can see in the fiddle, I've attempted to disable image smoothing in a variety of ways without success. Does anybody know why this doesn't work, and how to fix it?

Full screen background images scaling in IE11 strange behavior?

I stumble upon a strange behavior on one off my websites. The website makes use of superbgimage.js jquery script, which scales an image fullscreen and is part of a slider.
Now on Chrome and Firefox the images are scaled as expected (mostly scaled down as i make the images intentially a little bigger). The images are not looking scaled in IE11. The strange thing is when i hit F12 (to see developersmode) and hit F12 again, the images are scaling correctly in IE11.
This only occurs when F12 developers window is pinned not when the developers window is "free floating". So i guess it has to do with the browser height in IE11 not the same on initialize and after hitting F12
I already have
img {-ms-interpolation-mode: bicubic;}
Any suggestions?

Send HTML based on browser (iPhone or other)

I have an image carousel on a page on my site (using slidesjs and jQuery). It works fine on all desktop browsers, and even on the iPhone if the phone is on wireless. When the iPhone is connecting via 3G or GPRS, the image area of the carousel doesn't load and there's just blank white space.
However, I believe that the size of the images is stopping things from loading.
So what I'd like to do is detect whether or not the user is using mobile Safari, and if so, just show a single image in this space.
To do that means changing the HTML that is output for the carousel and just setting it to a single image source.
Is it possible to do this with javascript somehow ?
It is quite easy to do. Full explanation is here: http://www.quirksmode.org/js/detect.html.
Just look for "iPhone" in navigator.userAgent string.

png image shadow not showing in IE7&8

i have the problem for IE7 and 8 browser in Mozila FF and chrome works finely.
the problem is basically the dropdown menu is made of pang images with shadow effect for menu in this site it shows perfectly when i browsing with Mozila FF & Chrome
But the problem comes when i am browsing the site with IE7 & 8
the menu shows solid border instead of shadow.
and second prob. is when the page loading happen all menu images are showing.
Kindly visit this site
http://thirdgroove.com/
thanx
It's an IE thing. It has always had trouble displaying PNGs - even version 8 struggles. You could try changing it to a PNG8 instead of PNG24. That might work for IE 7 & 8, but I don't think it will help with IE 6 (you may not be bothered about that).
See:
How to solve/hack fading semi-transparent PNG bug in IE8?
and
http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html

Categories