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.
Related
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="">
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
}
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'm building a website for a client who's majority of content is video. I'm using the HTML5 video element to display the content but have problems when it comes to Safari on iOS.
Safari on iOS does not download the video metadata until the user initiates the download, so the width and height properties of the video are set to a default size of 300 x 150 px - leaving a big area of black on either side of the video stretching the width of my containing element.
I'm trying to make the website as responsive as possible and so this default size does not work for me. Is there anyway to combat this so that Safari on iOS respects the video size?
I used the following CSS that worked for me. Tested on iPad mini with iOS 7.1
video {
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
}
The solution for iOS can be achieved with pure CSS. This works for <video> that occupies the width of the viewport, which is common in mobile.
Based on viewport units
1vw = 1% of viewport width
Get the width percentage computation based on aspect ratio
If your video is 16:9
9 divided by 16 = 0.5625 = 56.25% = 56.25vw
If your video is 4:3 and 21:9 that would be 0.75 and 0.4285 respectively.
Apply these CSS rules
video {
width: 100% !important;
height: 100% !important;
max-height: 56.25vw !important;
}
<video>
<source src="video.mp4" type="video/mp4">
</video>
The misbehaving iOS would be forced by the max-height to not grow taller than the ratio based on the width.
Via CSS, try giving it a width of 100% and a height of auto.
EDIT
In this case you need to use JavaScript to wait until the video has loaded the metadata and then read and set the width and height, for example:
var v = document.getElementById('myVideo');
v.addEventListener('loadedmetadata', function(e) {
this.width = this.videoWidth;
this.height = this.videoHeight;
}, false);
I haven't exactly tested this but it should lead you on the right track.
Try using width:100%, height:0, padding-bottom:56.25% (for 16:9 video) to set the size of the container element
Then get the container height/width to set the height/width of video element:
var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
the_case_study_video = document.getElementById('tw-case-study-hero-video'),
the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
the_width = $(the_case_study_video_wrapper).css('width');
$(the_case_study_video).css({
'height': the_height,
'width': the_width
});
And then maybe set the css again on orientation resize and/or browser resize...
I just set a fix width and height in css rule for video tag and safari displays the video properly.