I've been working on this page for a client:
http://welcome.babbel.com/en/learn_spanish/
They want the very trendy look of a video + opaque div overlay, and I'm having some trouble getting it to work out on Safari. It seems the video refuses to respond to z-index, and the layering doesn't work. (on mobile, too). Oddly my research doesn't seem to be helping either.
Any ideas?
Related
I'm playing video on a website. The HTML5 <video> player is housed within a container div which positions it centrally. On most browsers when a user clicks full screen the video plays full screen in the browser without issue, but in Safari on OS the video is positioned half off the screen - I can only see the bottom 50%.
I suspect this is because the <div> container has CSS position:fixed and top:50% height:auto but I can't work out what I need to do to correct for this problem which only seems to occur in Safari.
I can't find any guidance on the web or evidence of anyone experiencing the same problem. Please help!
Website for reference: www.bigredbutton.tv - click a video to play it and then use the native full screen controls.
Thanks!
You can try setting the position to relative. It worked for one of the similar issue we faced.
I've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
I'm trying to figure out the reason for a weird behaviour in the browser.
The thing is when you start zooming in the webpage, suddenly the background comes in and invade all the content.
I've been walking around this but without results.
Of course the problem is only using IE. It works as expected on the rest of browsers.
Here's an screenshot of the problem and the css code as well.
I've got a simple webpage with a centered background image around the main div. The background image renders fine in IE and Firefox, but on Webkit-based browsers (Chrome, Safari), the background image only partially renders when the page is initially loaded. It's almost as if the browser just quits trying to render it. If I resize the browser window, or click on any of the links on the page, the background image shows fully. Here's the site: http://www.jnrtunes.com.
I've tried various CSS hacks, preloading images, etc and nothing seems to fix the problem. Has anyone had similar issues? Is there a problem with my HTML or CSS? I'm a realtive noob to HTML/CSS, so any advice would be appreciated. Thanks!
For some reason, it's the overflow: auto on the #wrapper div that does it. Don't ask me why, but there seems to be your problem.