JSBin: https://jsfiddle.net/mnLw83ga/
Whether it was zoomed or not, the image was clipped by 1px on the top. It will return normal when the phone was in horizontal mode.
code :
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
Sometimes the clip happened on the bottom, when zooming.
It looked like this:
safari image border-radius bug
Device Info: iOS 10.3.1 iPhone 6
Cannot recurrent on my iPhone 7
The clipping in Safari may be due to the version of Safari you're using. In Safari percentage values for border-radiusare only supported in 5.1+. I'd hate to think that that's the case with your version, however, it's possible. But on my end (Safari 11.0.2) it's coming through without clipping.
The safety would be to switch out the percentage for a fixed border-radius of 50px since your width and height are fixed.
img {
width: 100px;
height: 100px;
border-radius: 50px;
}
<img src="http://www.duoziwang.com/uploads/1602/1-160221222J70-L.jpg" alt="">
Related
I have a page with a grid of images where each have a slight CSS blur filter over them.
The scrolling works fine on iPhones (iOS 8 tested on 5+ and 6) but when it comes to iPad it gets really jerky and jumps around (iOS tested on 2 and 3 mini).
I tried the "trick" to force iOS into hardware acceleration but this didn't fix the issue.
-webkit-transform: translate3d(0, 0, 0);
I had the same issue, I solved using this properties only on a media that applies to iOS devices:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ProductListItem-image-container {
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
perspective: 1000;
backface-visibility: hidden;
}
.ProductListItem-blur {
-webkit-backdrop-filter: blur(14px);
}
}
Also, my image container had a this code:
transform: translate3d(0, 10px, 0);
will-change: transform;
And finally I had issues with the scroll on the general container so I added:
will-change: scroll-position;
Important: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
I'm working on a website, which features a high-resolution background image. The background image is set with the following CSS
#intro {
background: url(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
When viewed on my desktop it works fine.
When viewed in Firefox' responsive view, it works as predicted.
However when viewing this on my iPhone 5 with iOS 7 installed, it will yield this.
There is something going wrong when setting the
background-size: cover;
but I can't seem to figure it out. I've already scoured the internet.
The site itself, in a development environment:
http://websites.terarion.com/ehlen/
And the place where I got the background:
http://unsplash.com/
Wow, it seems Mobile Safari does not support background-attachment: fixed (or, at least doesn't support it well...)
If you remove that, background-size: cover behaves as you expect, but it breaks the expected behavior...
There are some work arounds for Mobile Safari involving fixed-positioned elements behind the content to mimic background-attachment: fixed, if desired.
Off topic, but love the design!
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 a web application that targets various devices including iPad 1,2,3. I use jQuery mobile to customize the UI.
I have a a jquery mobile . The image inside the checkbox is the 'home' and the 'search' image in iPad 3. It should have been the 'checked' and the 'unchecked' image however, like the way it works in iPad 1 and 2.
The resolution of iPad 3 is not the same as iPad 1 and 2 which is why this happens.
So how can I fix this having a common solution for all devices?
I found an answer to this.
In jquery mobile css there is a separate style for HD Retina. There you will find
-moz-background-size: 864px 18px;
-o-background-size: 864px 18px;
-webkit-background-size: 864px 18px;
background-size: 864px 18px;
Change the 864 to 776px. According to background image rules, the size specified here should half of the actual image. The actual image is 1552px. So half of this 776px. But jquery mobile code says 864, which is wrong.
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px; is the correct code.
FYI: https://github.com/jquery/jquery-mobile/issues/2224
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.