I'm having issues with this particular site not showing one of the backgrounds. I didn't design the site and it just got handed to me today.
But the URL is: http://musicalchairswc.com/
The CSS is:
div.body_wrapper {
background-image:url(img/big_bg_mod.jpg), url(img/bg_gradient.jpg);
background-repeat:no-repeat, repeat-y;
background-position: center -25px, center top;
}
But on an iPhone, the first background (img/big_bg_mod.jpg) doesn't show up. As far as my understanding goes - Mobile Safari now supports multiple backgrounds, yes?
Thanks beforehand for any pointers.
Read the fine documentation.
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
Here is the way I would approach it.
div.body_wrapper {
background-image:url(img/big_bg_mod_1-1.jpg), url(img/big_bg_mod_1-2.jpg), url(img/big_bg_mod_1-3.jpg), url(img/bg_gradient.jpg);
background-repeat:no-repeat, repeat-y;
background-position: center -25px, center 1000px, center 2000px, center top;
}
I split big_bg_mod.jpg (2320x1000, 2320x1000, 2320x320)
Related
Am I missing something here? if I take my desktop browser and size it to emulate the media query, the background is fixed, and relative to the screen, and the body scrolls over top of it... but when I view that page on my iphone, the background now stretches the entire length of the body of the page. What is going on here?!
http://i930.photobucket.com/albums/ad149/xesvuli420/WTH_zpse6ed336b.png
As you can see, somethings wrong... but what is it? Heres the code I am using:
background:transparent url("../images/plan.jpg") no-repeat fixed center; background-size: 100% 100%;}
Ive tried substituting cover, contain, auto.. everything I can think of... Its hard because its right when you size down a browser.
Please hep me..
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.
getting really confused here now after googling for the last 40 mins. I need a definite answer.
Im making a webapp for ipod touch, iphone(all gens) it i will be run in full screen mode as a native app eventually.
however what i want to know is. what width: and height: do i set my wrapper to in the css.... i need the dimentions, i get 960wide, 320wide 640wide i get all confused, i just need a definite answer of how many pixels wide it should be and high in portrait mode.
thanks
The Dimensions should be
Width: 320 x Height: 480
source: http://en.wikipedia.org/wiki/IPhone
Could you not set it as a percentage and have it always fill the screen no matter the device used .. iPad, iPhone# etc.
For example:
.container {
width: 94%;
margin: 0 3%; /* Give it some space from the sides. */
min-height: 100%;
}
Something along those lines?
You would need to set your wrapper width to 320px for portrait mode, although the user will have the option to view the web app in landscape mode so if you can get away with using percentages (i.e. wrapper {width:100%}) you'll be better off.
I discovered this unusual and somewhat annoying behavior when starting a new HTML5 video player project from scratch.
I have a very basic webpage with the following tags:
<div style="position: relative;">
<video id="vid" src="someVideo.mp4" width="960" height="540"></video>
<div style="position: absolute; top: 0; left: 0; width: 960px; height: 540px; background-color: red;"></div>
</div>
It appears as expected - the VIDEO element is hidden behind the big red rectangle that has the same exact dimensions.
Against my expectations, however, I can touch the center area of the red rectangle around where that play "overlay" that appears at the center of every HTML5 video on the iPhone or iPod Touch is located to cause the VIDEO element to start playing as if I touched the VIDEO element itself.
Is there some way to block this behavior? It doesn't occur on the iPad or on the desktop, but by the same token the overlay also doesn't appear on these platforms with a raw VIDEO tag on the page.
UPDATE: It seems to go so far as to block the touch event from anything positioned directly over it. If I try to attach an event listener to the absolutely positioned red DIV the associated event handler won't execute. This is really quite annoying.
UPDATE: #Matt H - This is a "web app" running in iOS's Safari. Through vigorous testing I have concluded that on an iPhone or iPod Touch the area in which a VIDEO element "resides" on the physical page is essentially reserved for that element as far as events are concerned so long as it's actually visible. The problem of course is that if the VIDEO element is not displayed then you can't chain a play method call from a touch on the overlay element. This sucks, but I assume it's part of Apple's efforts to prevent malicious coders from "tricking" users into playing VIDEO much like the "no autoplay" rule.
Did you try handling and canceling the touch event?
<body ontouchstart='return HandleTouch(event)'>
function HandleTouch(ev) {ev.preventDefault(); }
I don't know for certain if that'll work, though.
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)' : ')',