I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
Here is how the site looks on Internet Explorer:
http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899
I've only seen it on the latest version of IE on Windows 8.1, but it's possible that it happens on older versions as well. Unfortunately, I'm on a Mac and can't find any emulators to run IE.. So I am coming to the greatest community of tech-savvy people I know of for help.
The site (built with Wordpress) is commercialpaintersinc.com. It looks great on Google Chrome and Safari.. so this issue seems to be just in IE (although I haven't tested in Firefox either..).
This is how it is supposed to look:
Anyone got any idea as to what CSS I entered that caused the issue and/or how I can fix it to make it look how it is supposed to on ALL browsers?
Any feedback is majorly appreciated. Thanks!
You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it's likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.
The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.
#logo {
position: absolute;
}
#main-header {
min-height: 160px;
}
The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here - you should always test your layout regularly in all three major browsers to ensure you aren't building on top of a browser bug.
I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I've created a reduced demo of the issue as a public fiddle as well.
If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.
Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.
Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.
My Solution:
I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector
I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
<script src="css_browser_selector.js" type="text/javascript"></script>
right before the </head> tag in the header.php file.
At that point I was able to just create browser-specific CSS. It's dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari... But oh well.
Here is the code for Chrome/Safari vs. the code for Firefox/IE:
Chrome/Safari (Webkit):
.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}
Firefox (and same used for IE as well):
.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}
So yeah I didn't see Jon's answer until after I had "fixed" the issue. So, I will leave it as is.. although I'm sure my CSS is very sloppy! :P
Screenshot of IE browser now that it is fixed:
http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3
Thanks,
Chris
I'm working on this project: http://maithrigoonetilleke.com/
And I need some help fixing the scroll bar of the inner pages to be of the same colour in Chrome, Internet Explorer & Firefox.
but it only works on Chrome. In IE and Firefox it is same as default.
I used a custom css code to make the scrollbar look nicer:
CSS
::-webkit-scrollbar {
width: 12px;
background-color: #3c3c3c;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #000;
}
::-webkit-scrollbar-thumb {
border-radius: 0px;
background-color: #606060;
}
Check the link: http://maithrigoonetilleke.com/books/
CSS scrollbar customization is supported by Webkit-based browsers only. So, to customize scrollbars crossbrowser-way you should use javascript-based solution. There are lots of CSS customizable scrollbar plugins you can find in internet: jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar and others. Try jQuery Scrollbar - this one is fully CSS customizable.
Though in 1996 I had one of the top 5 Leonardo DiCaprio web-sites - I'm no programmer. So I tried using 4ormat templates to make my life easier but they didn't have an option for image rollovers so I had to change the css and of course its causing problems for me. It works fine in every browser - sometimes it even works fine in chrome! But if you load it a bunch the first few images on the page will load and then disappear! Its been great in every other browser! What am I doing wrong??
http://sarahcrump.4ormat.com/retouching
the code looks like this:
.rollover a{
display: block;
text-indent: -9999px;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#erilynn a{
height: 550px;
width: 393px;
background: url('http://4ormat-asset.s3.amazonaws.com/resources/1327226/0x550_1329240086.jpg') no-repeat left top;
}
#erilynn a:hover{
background-position: -393px;
}
I know other people have run into this problem as well but have yet to discover a solution that works.. Anyone know whats up?
If you are using dev channel of Chrome, this seems to be a bug in Chrome (Webkit more specifically) than in your code.
You can check the bug report for Chrome at http://code.google.com/p/chromium/issues/detail?id=111218
I have personally hit this problem few weeks ago in my code and sadly couldn't find a workaround.
Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.
I tried with
overflow: auto;
and
overflow: scroll;
and the result is the same.
I'm only testing on an iPad (on desktop browsers works perfectly).
Any ideas?
Edit following the comment left, kindly, by kritzikratzi:
[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touch can be added which should result in the expected behaviour.
Some, but very little, further reading:
Native momentum scrolling in iOS 5
Original answer, left for posterity.
Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.
Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.
The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow elements. Alternatively you could use #media queries to remove the overflow and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css", but I assume there are reasons.
Apply this code in your css
::-webkit-scrollbar{
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or Overflow:auto
I ended up with something like this...
::-webkit-scrollbar {
width: 15px;
height: 15px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it
Solution given by Chris Barr here
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
Works fine for me. Remove event.preventDefault if you need to use some clicks...
The iScroll4 javascript library will fix it right up. It has a hideScrollbar method that you can set to false to prevent the scrollbar from disappearing.
In my experience you need to make sure the element has display:block; applied for the -webkit-overflow-scrolling:touch; to work.
Other 2 peoples on SO proposed possible CSS-only solution to the problem. David Thomas' solution is perfect but has the limit that scrollbar is visible only during scrolling.
In order to have scrollbars always visible, is possible to followin guidelines suggested on the following links:
How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
CSS - Overflow: Scroll; - Always show vertical scroll bar?
make sure your body and divs have not a
position:fixed
else it would not work
Works fine for me, please try:
.scroll-container {
max-height: 250px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
Use this code, it work in ios/android APP webview; It delete some not portable css code;
If you are trying to achieve horizontal div scrolling with touch on mobile, the updated CSS fix does not work (tested on Android Chrome and iOS Safari multiple versions), eg:
-webkit-overflow-scrolling: touch
I found a solution and modified it for horizontal scrolling from before the CSS trick. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.
Usage:
touchHorizScroll('divIDtoScroll');
Functions:
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
Modified from vertical solution (pre CSS trick):
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/