I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)
Related
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.
I'm having trouble getting m background images to show on mobile safari. Sometimes it works, sometimes not. Usually if I refresh the page everything shows the way I want, which makes it tricky to test. Always works fine on the desktop browsers I've tried.
Here is the site: https://www.shimmeo.com
I've tried replacing the shorthand background css tags with non-shorthand, as suggested by other answers, and no joy.
TIA!
this sounds as an issue with loading the picture which takes too much time. How big is the picture for start?
Hope yhis will help.
Thanks
Background info: I'm working on a public facing website for our company. developing in VS2012, asp.net and vb.net, using some JS, some JQuery, and a decent amount of CSS.
Everything was looking great in our internal testing, until someone checked from home, where they only had IE 9. Suddenly, big chunks of text within expanding panels weren't being displayed, the bottom of the page was missing in most cases, some links that call javascript functions don't do anything... It's so random that the only reason I think they're connected is that it only happens in IE9 (or probably before, though no one has looked.)
I tried setting the standards mode to edge in the web.config. (tried setting it to IE10 as well, just to try) I've played with changing some positioning, heights in px instead of %, relative to fixed positioning, tried inserting the html5shiv, removing the gradients... nothing has changed. Everything displays correctly, until it doesn't display at all. When I was starting to see and research this last week, I thought I'd found an article somewhere that said there were limits on the CSS tags you could use in a page for IE9, but that number was WAY higher than anything I'm using, including both what's on the page directly, and incorporating the .css file. The only other clue is that it looks like at the bottom, where the missing stuff starts, I also lose the gradient from the page background (so just a block of all white, however if I play with the size of the window, sometimes I can get this block to slide down, and I can see another line or two that was originally hidden...
Has anyone had issues like this? The site works perfect in chrome, ff, IE10 and 11, several Linux browsers, opera, safari, from macs, pcs, and Linux boxes. everything except this old IE 9.
HELP?
Just a little hack fix I found, if anyone comes across this question looking for similar answers... I created a new css file implemented when IE9 browsers are detected, and I extended the min-height for the content of pages until every page displayed... the drawback is that on those longer pages, if the content isn't expanded, the footer still lies several scrolls down... but this only happens on the very content-lengthy pages, so while it isn't ideal, I guess it's good enough, if someone's ok with using outdated browser technology :/
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
I'm in the process of creating a website.
This website works great in Chrome (10), FF (3.6.13), however only half of it works in IE (8). Now, I'm aware of some of the issues between browsers, but this one has me stumped. Because half of the script is working (displaying properly) -- the other half does not.
A live version of the website may be found here
Additional information:
I am using the html5 doctype, <!DOCTYPE html>
I have validated my site with HTML5 as well as HTML4.01 STRICT
EDIT
At the request of Zabba, here is what SHOULD be happening:
I am externally loading content from other sources into my website.
My menu(s) and the text. In Chrome, and FF the menus, and the content are loaded and displayed. In IE, the menus are NOT loaded bu the content is. Funny enough, the logo also stops loading in IE.
EDIT
The problem has been narrowed down to a CSS issue, thank you!
The issue is in your CSS, not your JavaScript. Try these suggestions:
Remove your filter:alpha(opacity=80) from the #body block in your CSS.
Set z-index values of >5 on the missing items, since you have z-index:5 on #body. Or remove the z-index from #body.