Website hyperlinks not working in mobile safari only

HTML & CSS
1

I’m doing a redesign of a website using a bootstrap template and everything looked great until I ran into issues with IOS devices. The symptoms I’m having are that some hyperlinks on the site work and some don’t. The weird thing is that a different set of links work if I rotate the device from portrait to landscape. I was testing on an Ipad mini version 2 with IOS 11.3. I also used an Iphone 8 and experienced the same results.

I did some research and found that in IOS 7 safari mobile stopped treating objects that were not natively clickable as being so. This included things as divs. There was a workaround that is supposed to fix this issue and make safari see items as clickable. I am to add an empty onclick handler (onclick=””) to each object that should be clickable. I have done that for each of the links and it’s not helping. The weird thing is that if you look at the 2 “More…” links in the page header, they are exactly the same code. Sometimes one will work, but not the other. Also on the bulletin page, links seem to work and not work for no reason.

The test site is: http://216.73.18.74:3461/stjosephtheworker

I would appreciate your feedback as to whether this is a bug in mobile safari or IOS itself and any potential workarounds as I’m about to head, wall connect, pass out.

2

The first thing to do would be to run it through the validator https://validator.w3.org/ and fix the errors it finds.

2 Likes
3

Ninjaaaad by @Gandalf

There are over a dozen errors showing with the w3.org validation tool which makes browsers have to guess at what you are trying to achieve.

Try fixing the errors and also the warnings and see if the problem is solved.

https://validator.w3.org/nu/?showsource=yes&showoutline=yes&doc=http%3A%2F%2F216.73.18.74%3A3461%2Fstjosephtheworker%2F

There are also errors to be resolved with your CSS files.

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F216.73.18.74%3A3461%2Fstjosephtheworker%2F%23&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

2 Likes
4

Can’t debug as only on a mobile but sounds like a classic case of stacking levels. It’s likely that you have another element overlapping in some way and preventing the click through.

Try adding position:relative to the links to see if that helps.

There’s no need to add onclick to normal anchors at all.

As I said I couldn’t look at the code yet but my first guess would be an overlap although of course you should still fix the errors mentioned above as they may also have a bearing.

5 Likes
5

I would think so if it didn’t work in android as well… Andriod, however works fine. That’s why I’m guessing it’s an apple thing.

6

It’s more likely your code. Have you fixed the errors?

2 Likes
7

All but one. I’m missing a close div. I have 46 open divs and 45 close divs.

8

My guess would be that Android is “fixing” the broken code in a way that you find acceptable and that apple is not.

When presented with broken code all bets are off as to how or if any given browser will deal with it. The best thing you can do is to correct as many, if not all, of the errors that you can.

4 Likes
9

I fixed the code and the site still functions as it did before. No changes.

10

There is just one error I see remaining in a link on line 216.
It relates to the z-index setting: z-index::1000; you have two colons.
I don’t know if that is one of the problem links, but a faulty z-index is the sort of thing that may cause this kind of issue. And the fact you added a z-index suggests you needed it for some reason.

11

What link(s) in particular are you noticing the problem with?

12

All the ones that fall behind the modal windows. I set z-index:1000 and they now click, but they appear above the modal window. I guess I need to set the modal window to z-index 1001 when it displays and 999 when it hides. Why does mobile safari treat this differently than other browsers?

See the photo page. z-index of 1000 makes the links clickable.

13

does anyone know how to adjust the z-index of a modal window when it opens and closes? maybe some fancy javascript?

14

Hi,
That is the root of your problems right there, you shouldn’t have to tinker with z-index levels on the modal or anything under the modal.

You should be setting your modal to display:none; when it is not active. You would use JS to toggle a class between none and block.

Currently you are relying on visibility, opacity, and z-index to conceal your modal overlay but it is still there, and causing the current problems.

Here is a screenshot of your modal in it’s concealed state, I am hovering my cursor on <div class="popup" id="win"> and you can see that inspector still shows your modal overlay participating in the page. I added display:none but I have it disabled, that’s what the line through it means.

917×524 50 KB

Now, I have added display:none; to your modal styles and taken another screenshot in the same manner as above.

You will see that it is not highlighted which means it is not participating in the page any longer.

947×495 49 KB

In all reality your modal window normally wouldn’t need any more than z-index:1; or 2, but that would depend on what else is going on in the page. All that is needed is just enough to rise above any other positioned elements in the page that may have a higher stacking level. I see no reason for any other elements to be positioned on that page.

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    display: none; /*add this and then test your links again*/
}

Add display: none; and then test your links again, it should resolve the link problem.

Then it would be time to get JS to toggle a new class on your modal

6 Likes
15

That certainly sounds like the problem Ray and confirms my original guess :slight_smile:

However adding display none will kill the transition so I would suggest a negative z index to start with and then increase it when the modal is triggered.

I’m still away so can’t test but will be back this evening.

2 Likes
16

I have to say that I fell pray to someone else’s bad coding. I did not write the modal window. I got it from the internet. I don’t remember where.

Until yesterday, I did not know that it was using visibility = hidden. I will certainly rework the window to use display:none and display:block…

That was easier than I expected. I simply modified the 2 CSS styles and mobile safari is happy. I will test thoroughly and make sure it works everywhere.

1 Like
17

Be sure to see what Paul mentioned in post #15 about using a negative z-index on the modal if you want to keep your transitions working.

Unrelated to the modal window I see spans being used instead of heading tags all through the site.

<span class="pagetitle">Parish Photos<br></span>

Those should really be <h2> tags rather than spans styled to look like a heading.

Then back to the modal links, way too many <br> tags being used for what margins should be doing.

<div style="width:250px; display:inline-table; padding:5px;">
  <strong>
    2018
    <br>
    <br>
  </strong>
  <span class="arial10pt">
    <a href="javascript:slideshow('2018_01_A Year\'s worth of Events')" class="texttrigger" data-toggle="modal">A Year's worth of Events</a>
  </span>
  <br>
  <script></script>
  <br>
  <br>
</div>
4 Likes
18

You are right. I should have used heading tags rather than span tags for the page titles. I have corrected them.

I have also gone through and removed the <br> tags and used margins where applicable.

1 Like
19

Until yesterday, I did not know that the modal window was using visibility = hidden. I will certainly rework the window to use display:none and display:block…

The question that begs to be asked is why did the modal window work fine in windows (firefox and chrome) and android (chrome), but fail to do so in IOS (Safari)? Would I most likely have seen this in the desktop version of Safari too?

Also, why would the links that didn’t work because of the modal window, switch to the active color when clicked, but do nothing? I would think that they would not even register the screen tap.

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.