I saw online that there were a couple of bugs related to position: fixed and Mobile Safari but I could'nt find any solution to my problem so far.
I have a div with overflow: auto and inside I have a position: fixed element. On desktop, Android, Chrome and Firefox, it works great but when I try to do the same on Safari on an IPhone, the behaviour is completely different and my app is not working.
The position: fixed element is a popup and I want it to take the whole page. Technically in safari it does take the whole page but I can only see part of my popup that is directly over the overflow: auto element. Everything outside the div is transparent. I say technically because the whole popup is still on top of everything but I cannot see it. I can still interact with it though.
I tried to use position: absolute but i my case it's not a viable option since the first element is inside another position relative ou absolute element and it's not goind to do the same thing.
The only option that a can see is to alter the overflow value when the popup is displayed and change it back when I close it.
Is there anything that I missed?
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I have a stylesheet and use overflow:scroll; in my css to blend in scrollbars. It works in Firefox but not on my iPad in the safari browser. There, no scrollbars are shown but it is possible to scroll with two fingers.
Now, is that normal that iPad doesn't show scrollbars? That would be stupid somehow.
You might want to turn it on with: -webkit-overflow-scrolling: touch;
Yes, I believe that is normal behaviour from iOS3 and upwards.
You might want to check it on android, as android does not support overflow:scroll at all, from what I am aware (no two fingers, no scroll bar, no way to view content beyond the fold)
More information on iphone/ipad scrolling
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?
Assuming you are using iOS5.0 or later, I think you have to use the following:
-webkit-overflow-scrolling: auto (this is default style)
auto: One finger scrolling without momentum.
The other available style is
-webkit-overflow-scrolling: touch
touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).
Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Another Piece of Code for Thumb by #BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Original Source
Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)
For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.
That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.
Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).
Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.
In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.
To answer Sam Hasler comment above.
Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.
Live demo
Code:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
If you want to have the scroll to be always visible,
Do not set -webkit-overflow-scrolling: touch
then set custom style for scrollbar
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
You loss the momentum effect, but scrollbar will always be there.
(tested under iPhone 4/ iOS 7)
Mobile safari, as far as I have seen won't support scrollbars.
The best plugin I could find to get the job done is this.
Its Demos are available here.
It also has multiple predefined skins to suit your application.
here's a sample of what you'll get -
By convention, scrollbars are not used on iOS.
For a div with overflow: scroll, the only native way to scroll is with two fingers.
You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.
until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.
I haven't tested on ios5 but supposedly scrolling internal divs now works.
If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.