Website background images not showing on mobile safari - html

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

Related

CSS error on Safari, it works on Chrome

I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.

Chrome content/footer white spaces bug

I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.

IE8 issue - Some images and styles are working, others aren't

I don't understand why some images and styles are working on IE8 and others aren't in the same page of the same website!
http://www.chrissteeleperkins.com/
The homepage is fine but the images in the footer are missing in the whole website.
If you go to other pages of the website, sometimes the css style looks to be missing.
This weird behaviour seems to appear on IE8 - Windows 7.
Any help or suggestions?
Thank you,
Giorgio
The homepage is fine but the images in the footer are missing in the whole website.
Seems, that problem is with float: left in <li> elements. Try fixing size of blocks or make elements inline;
The problem is compatibility of your css/javascript with upper versions of IE, This should help you out.
Above is just a work around better way would be to fix your css and javascript/jquery to take care of compatibility issues.

Upload homepage

i have a question, where i hope someone can guide me.
I have made an homepage, and everything is working great, besides a few things that is miss placed in Firefox, and looks perfect in Chrome.
As well the site, looks abit weird on phones.
www.securehome.nu is the homepage.
Basic knowedge about the homepage
The site is created in Visual Studio
The site is build up around a MasterPage
Info about the problems
- The menu bar have some borders (the lines that splits each menu field from each other, those borders aint positionen the same place in firefox and chrome.
- On the phone, there is a white field in the bottom, even that the wrapper is height 100%, and it works smoothly on computer browsers.
I can easily put the whole site into a winrar document for download if someone wants to try play around with it, and help me what the problem is.
As i can see there is no problem with my both browser they are looking same and there is no responsive view for mobile of your site

HTML5 Background Video - Makes Other Content Pixelated / Grainy

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)