I am working on creating a parallax-ish scrolling effect for the mobile version of my site. The effect works fine on a desktop when I shrink the browser, or when I use Chrome's mobile viewer, but it doesn't work on my phone.
Here's the live example. Shrink your browser below 980px wide to see the effect. http://imbibe.staging.wpengine.com/
It appears that on mobile, the background image is shown at full size, and doesn't remain fixed.
It's just a CSS effect, no js or anything. Let me know what more details I can provide and I will! Thanks.
Related
I made a carousel to fill 100% height and width of browser and it does that fine on a desktop or in protriate mode on a mobile but when switched to landscape the display breaks. I made a bootply but it doesnt show the error im refering to. Maybe its caused by the form I have added?
http://www.bootply.com/BKl0fXVMrj
You can see the actual error here. Open dev tools select a iphone4,5,6 galaxy s4,5.. pretty much any current smart phone and you will see what I mean.
http://www.casouza.com/homelist
After my previous comment I looked deeper into this, try the code below in your CSS.
#bg-slide-carousel .carousel-inner {
position:fixed;
}
This makes the background carousel stay with the viewport. I've tested this in the chrome dev tools emulator with the site you posted and it appears to work fine.
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
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.
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
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/