I'm worried that the short answer to this question is NO.
But before I accept this fate I'll attempt a last ditch effort.
Usability concerns aside, is there any way I can do a div overflow for webkit mobile where, when scrolling, I do NOT see the scroll indicator?
I'm really hoping to avoid building a custom scroller in plain JS just because apple insisted on forcing the indicator to always be visible.
Any pointers much appreciated. I've looked around a lot but found nothing useful.
Reminder: I'm not asking about scroll bar customization!!! I'm asking about the indicator that shows during touchmove.
I think you can use this code. But this will only work in Chrome and Safari.
#element::-webkit-scrollbar {
display: none;
}
Technically you could do this in Chrome and Safari using the following CSS:
body::-webkit-scrollbar { display: none; }
However, for all other browsers you'll need Javascript. The basic algorithm would be as follows:
HTML
<div id="container">
<div id="content">Hello, here's lots of text...</div>
</div>
CSS
#container {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
#content {
position: absolute;
left: 0px;
top: 0px;
}
JAVASCRIPT (pseudo-code)
When clicking on #content, check for drag
If dragging then measure amount and invert amount
Set that amount to top position of #content
Keeping with my tradition of answering my own question after extended research, the indicator can be hidden only by removing -webkit-overflow-scrolling:true CSS attribute.
This, unfortunately, also removes the spiffy scroll-elasticity feature, which is of course whey one would want to use the above CSS.
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
I wanted to implement a typewriter effect in CSS and I found this great article in CSS Tricks
I was tinkering around with it and wanted to see if I can implement what would be on a hero image, shown here in Codepen
However, you can see that the blinking goes all the way to the end.
Is there way to fix, or this unavoidable, since the display it's set to table-cell?
You can try that. Remove fixed width from intro container and give this into description. And for centering you can add margin: 0 auto into intro.
#intro{
display: table;
height: 100vh;
margin: 0 auto;
.intro-description{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
}
Codepen: http://codepen.io/anon/pen/WGydqj
The closest I got was by changing your typing keyframe.
#keyframes typing {
from { width: 0 }
51%{border-right:transparent;}
100%{border-right:transparent;}
to { width: 100% }
}
You can hide the cursor from going all the way off but I'm not sure it looks quite right because it takes awhile for the bink/cursor to reappear at the end of the sentence. There are also some responsive issues with this because smaller screen sizes the blinking will disappear too early, the opposite problem... If this solution works for you but you still need it resposive, then you'll need make multiple keyframes and apply them through mq...
That being said, this is really cool. I didn't know you could do a pure css typing effect. I thought the only way to do this was with heavy DOM manipulation like they use in typeWriter.js which may still be a viable solution for you as well if the pure css trick doesn't work out.
I am curious about an odd rendering behaviour on Safari 5.1. In a two-column layout, the first column has a fixed width, and the second one should take the remaining part.
HTML:
<div class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right">
<p>Right. Some more text here, to show how odd the line breaks...</p>
</div>
</div>
CSS:
.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }
This works great on most browsers (on all "modern" browsers, as I thought), but now I found out, that Safari 5 adds an unintended right margin on the second column of the same width as the intended left margin (as if there were a .right { margin-right: 100px; } rule).
http://jsfiddle.net/MvF3V/1
Most Browsers:
Safari5: (tested on 5.1.7, but it occurs also on 5.1.9)
When I remove the overflow: hidden; it works fine, but I need that for other inside elements.
My questions is not how to rearrange this little example, but:
Is this a Safari-5-Bug, or are my CSS rules somehow wrong, even if they "work" on most browsers?
If it is a Bug, does it have a name, with which I can google some workarounds?
Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.
Update: The standard Android browser (Galaxy S3, AppleWebKit 534.30) seems to use the same old webkit engine. The same strange right margin appears: http://jsfiddle.net/MvF3V/1/embedded/result/
Give a
padding-left: 100px;
instead of
margin-left: 100px;
This seems indeed to be a bug in older Webkit versions. I found another question about the same issue.
There are workarounds. The most obvious is to avoid overflow: hidden to clear floats, and to use clearfix instead.
Since nobody answered to my questions, I try to give them myself:
Is this a Safari-5-Bug?
It's a Webkit Bug
If it is a Bug, does it have a name, with which I can google some workarounds?
No name found, apparently there are not many people who layout websites as I do... (and still want to support old browsers).
Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.
If you really want to define exceptions, you can make such ugly things in JavaScript
var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
var webkitVersion = parseFloat(webkitCheck[1]);
if (webkitVersion < 535) {
jQuery('html').addClass('oldWebkit');
}
}
< 535, because 534.59.10 is the Webkit version of the latest Safari5 version, and in Safari6, this bug does not occur anymore.
But thanks, #Era and #NoobEditor for your comments.
I just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.
Well, this is my first post here and really enjoying the site.
I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.
The URL is http://dev.aipoker.co.uk
I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.
Can anyone help put me out of my misery please?
Thanks, guys and gals.
I've had success with code like this:
footer {
display: block;
position: absolute;
width: 100%;
bottom: 0px;
}
Try this one, it works well on Firefox.
BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)
Cheers.
The minimal changes I can see to do this would be:
move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection
which ends up with something like this in your head:
<style type="text/css">
#body, #footerSection { position: absolute; }
#footerSection { bottom: 0px; }
</style>
<div id="body">
...
<div id="footerSection">
...
</div>
</div>
This is all you need to know about css only sticky footers & sticky navs:
Stick to bottom of page
Position: absolute;
top:auto;
bottom: 0;
Stick to bottom of screen
Position: fixed;
top:auto;
bottom:0;
Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.
You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.