i am implementing css3 patterns in my mobile site where every browser showing background pattern nicely. but in iPhone(in chrome & in safari) pattern is getting messed up - don't know the reason can anyone help me.
thnks in advance,
This is what I see on my IPhone:
Expected result:
Related
The question is simple I've tried several different techniques like re-ordering scripts being called in the DOM, removed 100% height from the body and html element in my css; but none of it worked.
My site won't scroll down the page on iPhone or iPad and I can't seem to figure out why. It will scroll a few hundred pixels down the page and then freezes.
I've run an audit in chrome and tightened up as much as I could but, i've checked the timeline but don't see any resources hogging the bandwidth that might cause the page to just freeze like this.
Here is the public facing link (sandbox) I have going on.
https://cloud.spinsys.com/sky/marketing-v3/index.html
Obviously to reproduce the error you'll have to view on an iPad or iPhone or any tablet that you might try it on to see if it works on those.
Has anyone encountered an issue with their site not scrolling on an iPad or iPhone?
It is a responsive site and it's of major importance that I get this fixed.
Any advice, help, suggestions would be most helpful, thanks to the S.O. community upfront.
The problem was the skrollr.js library. I have removed it and the page scrolls fine on iPad and iPhone.
I've run into a problem with Bootstrap's .top-nav only on Safari for iPhone. When scrolling through a .dropdown-menu, after releasing my finger from the phone, it seems to "keep" or "catch" the location my finger was and hover over that list-item, keeping the CSS style for that element's :hover. It doesn't attempt to direct the url anywhere, but it can be a little confusing to the end-user.
This does not happen on my Android phone or in the desktop browser at extra small width (no-touch).
I understand this could be a difficult question to answer, but I'm hoping somebody else has run into this problem on their own and knows the root cause / a fix.
Bootstrap 3, latest version of Safari for iPhone 5. Thank you!
edit: oh, also, this is Bootstrap integrated into Adobe Business Catalyst. I don't think that should make a difference, but it might be worth saying.
Have anyone tried this example app for showing PDF document on a UIScrollView? https://github.com/vfr/Reader/downloads
It's a great example and it works great. But, I want to show two pages when device is in landscape mode (currently, app shows only one page in both portrait and landscape modes)
I tried in my best to figure out a solution, but I failed. If anyone have done it, please give me a help. It's highly appreciated.
*(And also, I would like greatly thankful to github.com for sharing this example project as open source project. )*
you should try Leaves
here you can find out the source..... enjoy..
i use phonegap, jqtouch and iScoll for a iphone app.
I load some content via ajax into a div container. After that, sometimes all elements blurred and sometimes not.
Strangely after i make a swap (-webkit-transform: perspective(800);) between pages, all looks sharp.
Is there any solution for my problem?
Thanks Kevin
and sorry for the bas english
I hit a similar problem. The advice here helped...
https://groups.google.com/forum/#!topic/iscroll/DuZ5I-77fxo
I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.
But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.
I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?
EDIT:
I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.
Original answer:
That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.
I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.
For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.
Hope this makes sense, if not let me know.
FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.
I'm sure this is a bug... will respond if/when I figure out a fix.