So I've had this issue for a while now. When I load my website (ysbakker.eu) on my iPad, the background-image (which is way bigger than my screen resolution) has a offset on the right and on the bottom of 1 or 2 pixels. This may seem like a minor problem but it actually bugs me quite a lot. I don't know what causes this, perhaps a minor mistake in the viewport rendering engine.
I don't have this issue on my iPhone 4s, which uses the same software as my iPad Air 2.
Here's an image to display what I'm talking about:
It's probably not easy to see on the image since the offset is white as well... But it's really there, trust me. You can see it better by zooming in.
The background image is hosted on photobucket, I also tried storing it on my own server but that didn't change anything. Here's my css for reference:
body {
background: url('http://i95.photobucket.com/albums/l159/ysbakk3r/478769_zpsbe3rwtgu.jpg');
background-size: cover;
background-position: center;
}
Am I missing anything essential here? I think it shouldn't show the offset with my code like this. Any suggestions?
EDIT: I think I found the problem, just not how to solve it. When I zoom in on my iPad and scroll all the way right, there's no longer an offset. So I guess the page is zoomed out a tiny fraction. Any suggestions on how to solve this?
Please try this:
body {
background: url('http://i95.photobucket.com/albums/l159/ysbakk3r/478769_zpsbe3rwtgu.jpg');
background-size: cover;
background-position: center;
margin:0
}
Related
Here is what I need to do. I need to make a mobile app for ipad and iphone using phonegap and I need to set image background to all pages in the application. I was thinking to use a .png image in high resolution (the highest one I will be supporting), but I am not sure how to handle image re-sizing when the aspect ration is not kept. For example if I use image that is 1136X640 (iphone5) how it will look on iphone4 (res: 960 x 640). Or should I check the device and provide different images for different devices? Please help.
Use background-size propery in css3
e.g.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
IE hack (for lower than IE9)
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
It fits background image to your screen & still maintain aspect ratio of image.
Here is a good tutorial for you, Click Here
You can add the image as background in CSS like this :
body{
background-image:url('your_url');
background-size:cover;
}
This way it will fill your body
My page has a full screen background image, using cover. On Windows machines this looks fine, but when viewed on a MacBook, the image looks stretched and "cloudy". Why has this happened? My CSS is below:
background: url("images/backgroundimage.jpg");
background-size:100% auto;
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
background-size:cover;
I think your Macbook has a retina display. That's why your image is getting distort and stretched. If that is the case, you need to use retina ready images (that is 2X larger that the image you are currently using) to solve this problem.
Here is a nice article about retina ready website. A guide for creating a better retina web.
Take a look. It might solve your problem.
I have a site up, http://www.webdesignrepo.com, where I'm using vw and vh a lot.
The site works absolutely fine on Desktop and on Android browsers, but goes haywire in iOS on both the iphone and the ipad. The Desktop media query is mainly vw and vh. Once you get down to <768px wide I have swapped out some of the viewport units with px units.
I have a feeling it's something easy to fix, and I'm just not seeing something simple.
The only thing I can think of is its calculating the vw and vh units incorrectly, which is odd because caniuse.com says iOS safari 6.1 and above supports viewport units.
Anyone have any idea why this is happening?
(And yes, I see the irony of this whole situation)
Thanks in advance
iOS 6 and 7 seem to calculate viewport height correctly at first, but any call to vh after rendering the page recalculates the viewport height and adds it to the previous value, inconsistently resulting in an enormously tall page. Unfortunately, this is not consistent and currently there is no known workaround.
The caniuse.com viewport section's interactive mode links to a GitHub issue page explaining in more detail and Emil Björklund explains with some diagrams on his blog.
In iOS the vw or vh units render incorrectly when content inside an element changes.
This site http://mjau-mjau.com/blog/ios-vh-bug/ provides a useful workaround using Javascript, and iOS specific.
I however, did not want to use JS and decide to override the vw and vh font sizes with em for all mobile devices,
#media only screen and (max-device-width: 480px) {
.caption h1{
font-size: 6em;
}
.caption h2{
font-size: 4.3em;
}
.caption h1:first-letter {
font-size: 1.5em;
}
.caption p {
font-size: 1.2em;
}
}
I am having some serious trouble trying to get my sprites to show up right on a iPhone4+ using a high res (2x) version of my navigation sprite. Here's the code I'm using right now.
.pixelj a, .games a, .team a, .forums a {
width: 156px;
height: 35px;
background-image: url('/assets/blogtext2x.png');
background-repeat: no-repeat;
/* background-size: 156px 17px;*/
text-indent: -9999px;
overflow: hidden;
display: block;
float: left;
}
As you can see this is for a navigation where I have all the navigation word elements in a single sprited image. I tried using "background-size" but that just squished the whole sprite into the width/height provided. If I get rid of it it shows the 2x images but doesn't make them 50% so they view correctly.
What am I doing wrong here? Here's the #media query I am using to target high-res devices:
#media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx),
(max-device-width: 640px) {
You're absolutely on the right track here.
Essentially the process here with providing 'retina' graphics in a sprite via CSS is:
Set up your normal sprite, with the relevant positioning/etc within your CSS to feed to non-retina devices,
Set the background-size of this image,
Use a media query to feed the #2x variant of the image to those devices that support it.
There are a few key things to bear in mind:
setting background-size requires several declarations with different vendor prefixes to get the best browser coverage - see my code below to see what I mean
background-size is the size of the non-retina variant of the background image, not the size of the element it sits within. So, if the normal-size sprite image is 200px by 400px (and the high-resolution version is 400px by 800px), then it's 200px 400px that you declare.
background-size values are declared as <width> <height>.
You have to declare background-size in the first declaration, not in the retina media-query overwrite.
Although using #2x is becoming common-practice, it's not essential in web development: you could use a totally different image name.
It's very difficult to help you with your specific question without all the code, or a live URL to look at, but here's a high-level example.
In this example, I have a background-image which is 100px wide and 50px high which is positioned in the middle of the element
/* the element */
.element{
background: url(../img/site/background-image.png) 50% 50% no-repeat;
/* vendor-specfic declarations for background-size */
-webkit-background-size: 100px 50px;
-moz-background-size: 100px 50px;
-o-background-size: 100px 50px;
background-size: 100px 50px;
}
/* for retina users */
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2){
.element{
/* we only over-write background-image here */
background-image: url(../img/site/background-image#2x.png);
}
}
This will mean that those devices which fall into the second media query will load the #2x version of the background image, and will scale it to the background-size dimensions as declared.
Because the image is scaled back to the dimensions you set, if you're using sprites you only have to declare all the element's background-positions once as you usually would, and not twice to account for the larger retina graphic dimensions.
EDIT:
Having now seen your site, I can see exactly the problem you're having with your navigation:
The reason it looks like this is your CSS here (line 972 of style2.css):
.pixeljam a, .games a, .team a, .forums a {
background: no-repeat url('/assets/blogtext2x.png');
}
If you change that to background-image and remove the no-repeat, then it will work (otherwise background resets your previous background positions).
.pixeljam a, .games a, .team a, .forums a {
background-image: url('/assets/blogtext2x.png');
}
I have the following HTML structure
<body>
<div id="graphic">
<div id="wrap">
<svg width="8000px" height="32000px">
....
</svg>
</div>
</div>
And the following CSS applied to it:
#graphic {
width: 768px;
height: 1004px;
overflow: hidden;
}
#wrap {
width: 768px;
height: 1004px;
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
Using CSS3 Animations I want to pan / zoom on a very large svg graphic. It is working...kind of. I discovered a problem on the iPad that when setting the y-value of translate3d to below ~ 16500px the graphic is not displayed anymore (In Safari or Chrome it works totally fine). I thought that there might be a limit to the height / width of rendering SVGs on mobile Safari, but removing the overflow:hidden from the #graphic container lets me scroll all the way down and everything it displayed correctly.
Has anyone heard of or experienced similar limitations / Is there some CSS value I have to set for this whole think to work? Any help is much appreciated.
Yes, you have hit a limit. Translate3D'd elements must fit into GPU texture memory, and when you "over or under translate" this can cause the whole texture to be dumped. See the Apple documentation on texture memory limitations.