CSS priority issues in iPad's proprietary browser

[sgruts]

Hi everyone,

We are having problems with CSS rule priorities in the proprietary browser of iPad 7 and 8. Here are our HTML and CSS:

HTML #1:

<div>
    <b>+38 (067)</b>
    <span>+38 (067) 500-**-**</span>
    <a>Show</a>
 </div>

HTML #2:

<div>
    <b>+38 (067)</b>
    <span>+38 (067) 500-**-**</span>
    <a>Show</a>
 </div>

CSS:

.phoneDyn {line-height: 18px;}
.phoneDyn b {display: inline;}
.phoneDyn.phoneDynOpen span {display: inline !important;}
.phoneDynOpen a, .phoneDyn span, .phoneDynOpen b{ display: none;}
.phoneDyn a {font-size: 16px;}

When one clicks on the “Show” link “phoneDynOpen” class gets added to the first div and full phone is supposed to be shown instead of “+38 (067) Show”.

Everything works good in Firefox, Chrome, Opera and IE both on Windows and Linux but in iPad 8’s proprietary browser (not Safari) all contents of the first div disappears for HTML #2. At the same time, on iPad 7 only span and a tag gets hidden.

Thank you in advance for your help!

[shaneisme]

I honestly didn’t know there was a “proprietary” browser in iOS that wasn’t Safari… I don’t have it installed on my iPad anyway. I assume when you said “iPad 7 and 8”, you mean iOS 7 and 8?

Please set up a CodePen so we can see exactly what’s happening rather than looking at the code in text form.

[Author]

Posts