I have a coverflow type image gallery that I have created for mobile picture viewing. The first iteration lives here: http://codepen.io/jasonmerino/pen/Fsloq.
I've wired up the touch events and all seems to be going well for mobile Safari on iPhone and iPad, but when I go to view it on Chrome for iPhone or iPad the images disappear during part of the CSS translate3d which moves the images to the sides.
I have added -webkit-backface-visibility: hidden; to all of the markup that comprises the swiper, which does not fix this disappearing act my images are doing.
What am I missing here? Any help would be appreciated. Thanks!
The problem was with the peice of code where I was removing inlined CSS translate3d. The code that I had in place dealt with removing the translate by just re-assigning the background images.
for (var i = 0; i < images.length; i++) {
$el.images.eq(i).css('style', 'background-image: url(' + images[i].src + ')');
}
In mobile Safari this was fine, but in Chrome the images reloaded when I re-assigned the background image, hence the disappearing act. So I adjusted my code to be a little smarter, and concise, so that I only removed the translate from the inlined styles.
$el.images.css('transform', '');
Turns out that when you pass an empty string as the value to a CSS attribute in jQuery they just remove the style out for you instead of leaving it there but blank. Makes sense, but I never knew that before.
Anyway, that's what fixed it for me.
Related
I am having troubles with scrolling on my website on an iPhone.
What I mean by that is that normally, when you start scrolling and then release the display, the site will keep scrolling for a bit on an iPhone. But with this site, it doesn't. As soon as you remove your finger from the display, it will stop scrolling. It is as if the scrolling is sticky.
I really have no idea where I should even begin to look to debug the problem, which is why I am not posting the code (I'd have to post the complete website).
The issue is also not showing up on my Nexus 5. I have had the issue on two different iPhone 5.
I am basically looking for points to start to debug the problem right now.
Apply this script on the master page means if you have a Common layout page :
$(document).ready(function(){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iPad|iPhone|iPod)/i);
if (agentID) {
$('body').css('-webkit-overflow-scrolling', 'touch');
}
});
I wrote a JQM web app for Android and iPhone that runs in a custom native container that comes with a bunch of vendor libraries, including a custom version of iScroll. Recently, we upgraded the libraries from the vendor, including iScroll. Now, iPhone users are seeing visual distortion under certain conditions (screenshot: http://i.stack.imgur.com/mCUyB.png). The distortion correct themselves after scrolling.
Symptoms:
horizontal lines are being drawn on the right of the screen
Elements in the iscroll div are stretching past the right hand side. (Notice the divs has round edges on the left side, but not on the right. This also corrects itself after scrolling.
When both of these conditions are met, it triggers the distortion:
After downloading a larger dataset, causing more DOM elements to be attached to the iscroller
When the user navigates backwards. Essentially, when JQM page and its attached elements go from hidden to visible.
CSS code of the div iscroll:
element.style {
-webkit-transition: -webkit-transform 0ms;
transition: -webkit-transform 0ms;
-webkit-transform-origin: 0px 0px;
-webkit-transform: translate3d(0px, -131px, 0px) scale(1);
}
A few more observations:
I suspect the iscroll is because the previous iscroll version did not use -webkit-transform.
on iPhone, -webkit-transform: translate3d is hardware accelerated.
the distortion is only on iPhone, not on Android.
Not sure what other information I should provide. I could provide the code for the iscroll, but it's 800 lines of code.
This is my first post here. Be Gentle.
I was having some issues with iScroll 5 where images and even text would get distorted when scrolling to some items (works fine on browsers but fails on iPhones/iPads).
I have 4 tabs with one scroll each. The first one works fine (maybe because it has less items?), but the others fail when scrolling to the last item or so.
After some tests, I noticed that removing the CSS transition on the container (with the #id that I'm using to call the iScroll), solved the problem. I'm still keeping the transitions though. I just had to move it to a different container down on the DOM tree. (on my case it was just a fade in effect when the scroll finishes loading).
It's a really strange bug... Hope it helps you solve your problem too.
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.
Really, wondering and don't know why, on the initial load, the "<'p'>" element that holds content is scaled up, the fontsize, if i change orientation of the device it will then adjust scaling and keep it at declared font size that originally was intended, but that initial load. any ideas why?
I had a similar problem and the answer that worked for me was:
This is because sometimes Safari webview Zooms text automatically when
it thinks its a good idea.
To disable this behavior add this to your body CSS Style:
-webkit-text-size-adjust:none;
Are you sure loading CSS portion before content?
I am using the Jquery/Jqtouch libraries for an iphone compatible site. I am now stuck with a problem just in iPhone 4 (not in 2g, 3g or 3gs) where the text becomes blurry on one specific scenario. Below is how it happens
The site has one common div container.
<div id="container"></div>
The container is filled with content dynamically based on the user action. Below is the function that does that.
function loadPage(url, section, callback) {
$('#container').empty();
$('#container').load(url + ' ' + section, loadComplete(section));
}
One sample call to the above function
loadPage("Data.htm", "#Friends", null);
Basicaly eveything works fine except on one scenario where the amount the data on the container is huge (ie the #container height increases to 1500px+ not predictable). Now if i replace it with smaller data for different tabs on the same container then the text becomes blurry. Attached is the image
http://i.stack.imgur.com/XE9q4.png
Did anyone come across this scenario. Thanks in advance.
Try closing all your running apps besides safari. It sounds crazy but we have the same problem on the ipad and it just seems to be running out of memory at some point. Closing all the apps stops it. Other thing that seems to make a difference is -webkit-overflow-scrolling:touch, if it doesnt have this property then it doesnt seem to have the problem described.
i was able to fix this by applying the same settings to reduce flicker on the element in webkit browsers:
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Graphics elements must be "aligned" with the pixels on the screen; coordinates must always expressed as integral values and not floating values. If not, the subpixel rendering engine of the GPU would make it blurry, which is not a problem with animation but definitely one with static images.
In the native SDK, we have to make sure everything is aligned (such as using CGRectMakeIntegral()).
Since you're using a web framework, it's more difficult to tell how to exactly how fix the problem, but I would try to adjust the sizes of your to a precise size and not let the framework figure it out.
What content do you load? Images? Text? There's an internal limit on image sizes for the iPhone (about 4 Megapixels or so). It looks like the phone is trying to reduce the memory load of your website and reduces the resolution to non-retina values.
I can't say more without you posting code.
This is a shot in the dark, but have you aset your sizes using pt values for your block elements, and em for your text?
The iphone4 resizes your content to fit its higher-res Retina display (compared to the older iphone), and with that scaling i have sometimes noticed blur when using pixel values for block height, width, font size, etc.
Very hard to diagnose without seeing the actual code, but could be the issue.
In my case it was CSS
-webkit-transform: translateZ(0);
applied to one of the elements in body. So as Ariejan said, it's removing transition property that fixes it.
body{ text-rendering: optimizeLegibility}
could solve this issue, worth a shot if you haven't included it already
Sometimes, Text blurry may be cause of the iScroll Plugin. Did you use this?
Try to comment
trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',