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/
Related
I've got a bit of an issue with SVG files now. I'm trying to make the logo on my site set to an SVG, and now that it's live, my friends can see it (mobile browsers, safari) but I'm on Iridium (Chrome) and don't see it. I've tried Chrome on mobile, I've tried Brave (which I believe is also based on Chrome) and neither have worked. IE and Firefox (Quantum) do display the file with no issues, but only part of it displays on any chrome-based browser.
Here's a screenshot of what I see on chrome:
https://i.gyazo.com/8912785d57756c5cda09c941f4fa3542.png
Here's a screenshot of what I should see (Firefox):
https://i.gyazo.com/57272d67a4406243f6ea1aeeb89d7138.png
Some extra details.
-The text part is an image, and so is the girl. The rectangle that does show in Chrome is an actual rectangle. Like, it was the shape path when exported from Photoshop.
-When I open the image in chrome (just the image, not embedded on the site) it shows up fine. I can play with dimensions, do whatever and everything works perfectly.
-The SVG size is all 100% everywhere, and the parent div is the size I need it to be, so that's not the problem. I'm not that new to embedding SVGs I use a number of them on the site as well.
-There's no error in the browser console, not that I'm sure it would make one either way.
EDIT: Included code:
https://hastebin.com/fugodijiwa.xml
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.
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.
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.