1

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!

Ricardo de la Vega
  • 11
  • 2
  • 1
    Try to debug it with on mac with safari and dev tool. Connect your iphone and try it. I guess you might be missing some other vendor prefixes. From my experience I can say that safari likes to be tricky. – El Danielo Jul 05 '17 at 20:10
  • Thank you, El Danielo. I don't currently have an iPhone, then I have to wait for my daughter to come for testing your suggestion. I'll tell you if any progress does occur... – Ricardo de la Vega Jul 06 '17 at 10:07
  • In Safari for Mac, using Web Inspector and selecting "Safari - iOS 10 - iPhone" as the user agent, my CSS works flawlessly. Pending debugging with a real iPhone... – Ricardo de la Vega Jul 06 '17 at 15:29

1 Answers1

1

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);
}
Adam
  • 17,838
  • 32
  • 54
  • Thank you for your answer, Adam. I will try to guess why the implementation on Safari for iOS is rejecting abbr as an activable element. Your proposed solution -tabbindexing to 0- cannot be done on my site, as it has too many abbreviations and symbols -it's a medical site, several abbreviations and symbols on many pages and some abbreviations and symbols on form pages already using tabindex, all this applicable to more than 800 pages in the whole site. I need something that works in CSS, cannot afford to modify so many things. – Ricardo de la Vega Jul 06 '17 at 08:46
  • Thank you once again, Adam. This dynamic solution requires every page to declare and load jQuery, I think. – Ricardo de la Vega Jul 06 '17 at 09:11
  • It can be done easily using standard javascript (see new edited answer) – Adam Jul 06 '17 at 10:38
  • I'll try it, then tell you with the results. I'll try to apply this for symbols wearing span[title] as well. Thank you very much. – Ricardo de la Vega Jul 06 '17 at 10:41
  • Just tested. Adding tabindex="-1" does no effect at all, at least on iPhone 5C. Thank you very much for your interest in helping me. – Ricardo de la Vega Jul 06 '17 at 11:25