I have managed to make the footer fixed in my web page.
I used the following in my CSS file:
#footer
{
position:fixed;
left:0px;
bottom:0px;
}
This works in all major browsers (IE 8, Safari, Firefox).
However, when I test this page on iOS Device (iPod & iPad) and Galaxy tab, this does not make the footer fixed at the bottom. Rather, when the page scrolls, the footer also scrolls up / down with it.
Can anybody help me with this issue. I want to ensure that if it works for mobile clients then it does not break the currently behaviour on desktop browsers. In short a solution working for both.
Thanks in advance.
Try this http://cubiq.org/iscroll-4
example http://cubiq.org/dropbox/iscroll4/examples/simple/
but it has some problems
Form fields compatibility
Zoom glitches
Better desktop browser compatibility
onScroll event
hash and hash change support (ie:
http://example.com/#element-id)
automatic refresh upon DOM change
Ok,
I solved the problem myself. Like the code which I posted in the question works well on all modern desktop browsers.
I used iScroll. The problem with iScroll was that it was not working properly with Firefox 3.6. So what I did is when I detect the browser as Firefox, I set the id of the wrapper of iScroll to "" (empty string). This causes the browser to use the earlier code.
This is how it got working in all desktop + mobile browsers.
Hope this helps to others,
Related
Safari applies my styles normally on page load for any size. However, it won't apply desktop styles if the window has been sized for mobile since at any point since the last reload.
To most easily see/trigger the behavior, open the site in Safari 13 at desktop size and see the desired layout (most notable here is the navigation bar). Resize the browser down to mobile layout (be sure the navigation switches to hamburger mode), then back up to the desktop layout. (You may also load the site at mobile first, then simply widen the window.)
See test case here: https://www.davincilabs.com/
Normal behavior (as on load):
After browser resize (Safari 13 only):
If you inspect menu elements, you will see that styles-l.css and navigation-desktop.css apply. After resizing up, the style sheets no longer apply.
IMPORTANT: This does not appear to be a JavaScript problem! The behavior still occurs if you disable JavaScript from the develop menu.
To recap:
Found in Safari 13 ONLY. Earlier versions of Safari that we have tested so far do not experience this. Other browsers tested (Chrome, Firefox, Edge) do not experience this.
I have only experienced on desktop. This might affect phones as well but it's impossible to reproduce with my test case; I'm not using any breakpoints small enough.
Initial page load is always correct
Issue triggers when window is enlarged greater than the mobile breakpoint
Safari appears to be no longer applying an entire loaded style sheet file (styles-l.css) to the page layout
Occurs even with JavaScript shut off
This must be fairly rare as I can't find other occurrences after a lot of searching, but it's affecting multiple sites I am working on. Finally, if you cause Safari to reconsider CSS rules in the inspector, (such as by manually editing the parameters of a media query,) Safari will instantly redraw the page correctly.
I had the same problem.
I don't know why but I have this problem just with the store on Magento 2 and with Safari 13. (Also others big e-commerce like The Protein Works, Bulk Powders, sigmabeauty ecc)
I fixed it with macOS Catalina 10.15.7 and Safari 14.
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
On a slider I have on my site, for some reason iPhone users are reporting that the text in the main slider (royal slider) isn't displaying. I've tested it in multiple online simulators (but they've probably just been restricting the size, rather than using the iPhones rendering engine) and have yet to replicate the issue.
It works fine for me on Android devices, but can't figure out what would stop it from showing on an iPhone.
Any ideas why?
Here's the url Issue is in the main slider in "Breaking" news section
Thanks!
It seems the royalslider.css file is telling the <a> containing the text to hide in Safari (desktop and mobile) browsers. Check Safari on the desktop and you'll see the following CSS on line 29 of royalslider.css.
-webkit-backface-visibility: hidden;
You'll probably want to override the value in your CSS file.
Here's some info on backface-visibility
The Responsive Design View in Firefox includes a vertical scrollbar within the tested width, which makes previewing a site compared to a real mobile device without scrollbars slightly uncomfortable. So I added
html{ overflow-y: hidden; }
to my CSS. While this works perfectly for desktop testing, all iOS devices I checked and most of the Android devices too, it completely screws up the site in IE10 on Windows Phone 8: The page starts jumping like crazy when you use navigations and forms, sometimes it even shows a blank screen that goes away if you scroll slightly.
It took me several days to figure out this issue as I am working on a quite complex site, so just to let everyone know who has similar problems.
How do you prevent this when using the Responsive Design View in Firefox?
Meanwhile I have switched to a responsive preview bookmarklet (http://lab.maltewassermann.com/viewport-resizer/) that does not show the scrollbar anyway. Mozilla seems to address this with "mobile scrollbars" in upcoming version 22 (http://www.youtube.com/watch?v=SGCbIMH3gMM).
As per my understanding, writing a style specifically for mozilla will solve this issue.
eg: #-moz-document url-prefix()
{
html{ overflow-y: hidden; }
}
Place the code specifically for mozilla towards the bottom of your stylesheet.
Firefox shows scrollbars according to the operating system preferences. If you're on Mac OSX Mountain Lion (10.8), open System Preferences > General and choose to Show scroll bars...When scrolling.
As I recall, this is the default when installing Mountain Lion. When I first upgraded, I switched to showing scroll bars always, to avoid obscuring the content of a scrolling area. I would probably rather test in a virtual machine than change my OS settings.
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)