I know this might be a bit off topic was windows isn't supported by Ionic, but I was wondering if anyone had had any luck fixing some of the CSS oddities I am facing when building my app on a Windows 10 Phone.
The first issue is with pull to refresh. It still seems to function correctly, but the movement of the element being dragged down seems quite jumpy and in certain cases it won't move at all until the user releases their finger from the screen at which point it will jump down and refresh.
The second issue is with footer elements not moving up when the keyboard is showing.
The final issue is with side menus not closing properly. My app currently uses a side menu on both sides and it appears that when I close either side menu a slight portion of the right side menu displays in the header momentarily.
One other thing to note is that when I build the app for local machine (using x86 architecture) all the transitions seem to work fine.
If anyone has any suggestions or would be able to help that would be greatly appreciated!
With some bootstrap 3.2 integration I have been making a horizontal scrolling site with 100% height and width divs to represent "pages".
It has been functioning correctly on various devices throughout development but when I went to use it in mobile-safari after ios 8 update the site is now displaying incorrectly...FFS
For the time being you can see the development site here:
(site is no longer active)
I'm pretty much convinced it is related to the audio/music player section. It's an old music player that has been restyled for the new site. The plan is for the site to go live with this player and then we'll be working on updating it after that.
To see how the site 'should' look you can view it in chrome on iphone (or on android of course).
It works fine in resized desktop browsers - it is literally just the ios 8 mobile-safari update that seems to have a bug.
For all I know they may update and it will fix itself, but I can't really just rely on that.
The navigation should be 100% of the viewport not 100% of the entire document.
There should be an audio player fixed at the bottom of the viewport.
I've tried a few things like stacking the divs vertically and while that helped with the navigation width issue it caused the audio player element then became contained within the parent 'music' container - I set the music container to overflow:scroll and -webkit-overflow-scrolling:touch as with the other sections but the audio player controls stopped being fixed...? It also stopped it working in chrome for ios which means it really isn't a viable option.
(Please excuse the messy css if you do take a look. The feel of the music section was revised partway through and I'm waiting until the end of development to clean it up.)
As far as I can tell this is not something that has been asked yet - I've searched for a few hours but I think the case is probably quite unique (horizontal full page layouts with bespoke audio players are pretty uncommon as far as I know)
Any help will be much appreciated
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.
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
I have a problem that I've been working on for the past 10 hours (going crazy).
I've been working on a revised version of Walma - which is a collaborative white board written for node.js. I have placed a div header above the whiteboard, and a content area and footer div below it.
This works perfectly on my pc, however when I try to run it on my iPhone I can not scroll down the page to view content. It's like there is no permission to do this- I can not scroll or zoom or anything apart from draw on the canvas.
Notes: I have made the canvas only take up 60% of the iphone screen so that I am able to scroll (as apposed to draw). But this doesn't work.
I have removed the meta tags that you see in the demo.
I have changed the css multiple times with no success.
Is there something I'm over looking? Is there some javascript that's preventing iphone from scrolling that I haven't noticed? I would be incredibly thankful if anyone could point me in the right direction.
Git (demo is linked in the description top) : https://github.com/opinsys/walma
My adaptation : https://dl.dropboxusercontent.com/u/91956067/walma.tar.gz
Many Many thanks,
Joel.