Transparent PNG div not showing on iOS - html

Real simple, but I don't know what's going on...
I have a kenburns-ish slideshow in the background, over it I have a bgImageFramer.png transparent png to fade out the sides (which makes reading the navigation (1, 2, 3) much easier.
Page looks great in all major browsers on desktop... But neither Chrome or Safari on my iPad or iPhone will show the bgImageFramer...
Thanks for everybody's help! :)

The issue was the kenburns.js plugin and how it layered it's own z-indexes. I reset all of the z-indexes in the stack >0 and the layering is now correct.

Related

Responsive video banner on Safari has huge gaps top and bottom

I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.

HTML5 Canvas rotate in Google Chrome - Terrible rendering

When a photo is displayed on a HTML5 canvas element, and is rotated, the result looks fine in FireFox but terrible in Chrome. It seems as if Google Chrome does not know how to smooth the rotated edges.
For an example take a look at http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
Make one of the photos big and have it rotated slightly around its center. Turn on the 'simple mode' so that the photo gets a white border for maximum contrast. You will now see that the edges of the photo are anything but smooth. In FireFox the result is much better!
Does anyone know if this problem can be fixed?
The Chrome team has been breaking and unbreaking anti-aliasing of different parts of Canvas for a year and a half now.
Lots of bugs crop up with the same problem: http://code.google.com/p/chromium/issues/detail?id=7508
Unfortunately, waiting is your only recourse here, unless you want to make an anti-alias effect yourself, which is possible but a lot of work for something that "should" look consistent

Body background image causes the FPS to drop in safari for iPad

I have a website with a jquery cycle slideshow. It slides smoothly on the ipad, but if i add a css background image to the body, it seems like the FPS drops and the slide effect looks really bad. This happends even if the background image is smaller than the iPad screen.
Why is this and how can I fix it?
You can try to use hardware acceleration like adding the -webkit-transform: translateZ(0); CSS to the block you want to accelerate.
Here is a good article about GPU accelerating.
Also, I don't know what image do you use, but there is a bug in webkits, where using CSS3 radial gradients for background may cause great drops in FPS.

This site does not scroll smoothly at all!

How come? This is the site www.jivanmulders.nl
It isn't the large background image. I removed it and the scrolling experience stayed the same. It's in all browsers ...
I suspect it's the HTML ... but what and why? Thanks for any help!
Omit the background image and all these "jivanmulders_top_A.gif" etc graphics as well. The jQuery localScroll/scrollto seems to work smoothly without them.
It is the fixed background image together with the transparency effects. Being fixed mean that the browser has to re-render the complete page every time you scroll a single pixel.

blurry header image in IE7 and IE8

On this test page: http:// www.onebagoneearth.com/ Products-test , where it says "oboe love series", "oboe kind series", etc, when you hover over that text (which is a background-image) in IE7 and IE8(at least on Vista, and also with IETester), the image blurs (not just by being opaque though...that would be the normal hover effect). Why is that?
The same thing doesn't happen on this page with similar CSS: http:// www.onebagoneearth.com /Products . If it's the zoom:1 bit of CSS, I don't understand why it would do that on one page and not the other.
I see what you mean, but on my computer it doesn't blur, it gets a noisy outline of dark gray pixels instead.
It's because you are using a PNG image with an alpha channel, and are applying a filter to it. Internet Explorer doesn't handle this correctly and draws the semi transparent pixels against a solid background instead of the actual background.
When this happens and how it appears exactly may vary from computer to computer, and even on the same computer in different situations. That's why some people experience it and some don't.