iOS and CSS issue (Positioning)

@DigiZAMay 16.2016

Greetings Ladies and Gents,

I am rather new to the CSS side of things, and i have come accross a bit of a issue thats driving me a bit batty.
I have a Site im busy working on that has a JWplayer element within a DIV.

Now I have a hotspot that appears at various times and at various positions but all it is basically is a overlay.

the basics of the coding im using for the overlay (CSS Coding) is as follows.

[Code] #hotspots { width: 100%; height: 100%; position: absolute; z-index: 99; pointer-events: none; margin: 0 auto; left: 24%; }

#hotspots span { position: absolute; width: 75px; height: 50px; background-image: url(../assets/Images/test.png); background-repeat: no-repeat; background-position: center center; opacity: 0.5; cursor: pointer; pointer-events: auto; transition: 0.2s; transform: scale(0,0); -webkit-transition: 0.2s; -webkit-transform: scale(0,0); }

[/code]

now in every browser on Unix and Windows systems no issue everything is working 100% however soon as iOS is introduced things fall apart, I did a little digging and see that using the position absolute is whats causing issues on Ipads etc…

But I test things, using position fixed, or relative breaks my hotspots everywhere else.

So wanted to know if anyone has a suggestion or if there is a way to say if iOS or Ipad or whatever that you can ignore the position or use position: relative instead for the entry for hotspots?

Thanks in advance for the help.

to post a comment

CSS

6 Comments(s) _↴

@jedaisoulMay 16.2016 — #Hi and welcome to the site. I neither have nor want an iOS device, so I can't answer you query. However, much as I detest Apple and its products, I would add a word of caution: Just because your code works on other browsers does not mean that the problem is with iOS. Have you verified the page? Also, how is the "hot spot" popping up in different places (some JavaScript)?

There are a number of reasons why your code could be failing, and I'm not sure from the code extracts that you are using absolute positioning correctly. Can you provide a link to your site?

@DigiZAauthorMay 17.2016 — #hahah Hi Jedaisol, Thanks for the welcoming.

Yea if i had it my way i really wouldnt concern myself with it, but alas its a need i have to address, kind of like the the old wood stain in the dark corner of a abandoned house hahahaha.

Well the hotspots work on 3 levels, Im utilizing JWPlayer for my videos, and using a 3 way hotspot system.

The Java scripting thats being used is

<i>
 </i>&lt;script type="text/javascript"&gt;
 var spots = [];
 var hotspots = document.getElementById('hotspots');
 var seeking = false;
 var player = jwplayer();
 
 // Load chapters / captions
 player.onReady(function(){
 var r = new XMLHttpRequest();
 r.onreadystatechange = function() {
 if (r.readyState == 4 &amp;&amp; r.status == 200) {
 var t = r.responseText.split("nn");
 t.shift();
 for(var i=0; i&lt;t.length; i++) {
 var c = parse(t[i]);
 if(c.href) {
 spots.push(c);
 }
 }
 }
 };
 r.open('GET','./assets/hotspots.vtt',true);
 r.send();
 });
 function parse(d) {
 var a = d.split("n");
 var t = a[0];
 var i = t.indexOf(' --&gt; ');
 a.shift();
 var j = JSON.parse(a.join(''));
 return {
 begin: seconds(t.substr(0,i)),
 end: seconds(t.substr(i+5)),
 href: j.href,
 left:Number(j.left.substr(0,j.left.length-1))/100,
 top:Number(j.top.substr(0,j.top.length-1))/100,
 show: false
 }
 };
 function seconds(s) {
 var a = s.split(':');
 var r = Number(a[a.length-1]) + Number(a[a.length-2]) * 60;
 if(a.length &gt; 2) { r+= Number(a[a.length-3]) * 3600; }
 return r;
 };
 
 
 
 // Highlight active spots
 player.onTime(function(e) {
 if(!seeking) {
 setSpots(e.position);
 }
 });
 player.onSeek(function(e) {
 seeking = true;
 setTimeout(function(){seeking=false;},500);
 });
 function setSpots(p){
 for(var j=0; j&lt;spots.length; j++) {
 if(spots[j].begin &lt;= p &amp;&amp; spots[j].end &gt;= p) {
 if(!spots[j].show) {
 var s = document.createElement("span");
 s.id = "spot"+j;
 s.style.left = $(window).innerWidth()*spots[j].left-20+"px";
 s.style.top = $(window).innerHeight()*spots[j].top-20+"px";
 popSpot(s);
 hotspots.appendChild(s);
 spots[j].show = true;
 }
 } else if(spots[j].show) {
 dropSpot(document.getElementById("spot"+j));
 spots[j].show = false;
 }
 }
 };
 function popSpot(s) {
 var t = Math.round(Math.random()*800);
 setTimeout(function(){
 s.style.transform="scale(1,1)";
 s.style.webkitTransform="scale(1,1)";
 }, t);
 };
 function dropSpot(s) {
 var t = Math.round(Math.random()*400);
 setTimeout(function(){
 s.style.transform = "scale(0,0)";
 s.style.webkitTransform = "scale(0,0)";
 }, t);
 setTimeout(function(){hotspots.removeChild(s);}, t+200);
 };
 
 
 
 // Hook up rolls and click
 hotspots.addEventListener("click",function(e) {
 if(e.target.id.indexOf("spot") == 0) {
 var s = spots[e.target.id.replace("spot","")];
 if(s.href.indexOf("#t=") == 0) {
 jwplayer().seek(s.href.substr(3));
 } else {
 window.open(s.href, "_blank");
 jwplayer().pause(true);
 }
 }
 });
 hotspots.addEventListener("mouseover",function(e) {
 if(e.target.id.indexOf("spot") == 0) {
 e.target.style.opacity = 1;
 }
 });
 hotspots.addEventListener("mouseout",function(e) {
 if(e.target.id.indexOf("spot") == 0) {
 e.target.style.opacity = 0.5;
 }
 });
 
 &lt;/script&gt;

And then the document its getting all the hotspot locations from is the hotspots.vtt file, formatted as such

[Code]
 00:01:05.000 --> 00:01:15.000
 {
 "href":"testclick.html",
 "left": "60%",
 "top": "20%"
 }
 [/code]

I call the video in a div this way

<i>
 </i>&lt;div class="section" id="WatchMe"&gt;
 &lt;a href="#" onclick="self.close()" class ="closeIcon"&gt;&lt;h1&gt;Close &lt;span class="headerTxt"&gt;Me&lt;/span&gt; &lt;/h1&gt;&lt;/a&gt;
 &lt;div id="player" data-video="testPlaylist.m3u8"&gt;&lt;/div&gt;
 &lt;div id="hotspots"&gt;&lt;/div&gt;
 &lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
 var playerInstance = jwplayer("player");
 playerInstance.setup({
 file: $("#player").data("video"),
 image: "./imgs/logo_test.png",
 stretching: "uniform",
 width:"55%",
 aspectratio: "16:9",
 
 <i>	</i>});
 &lt;/script&gt;

and obviously the css coding I have originally posted.

The Java scripting I have kept all on the page itself for testing purposes, only includes I am using are

[Code]
 <script type="text/javascript" src="./js/jquery.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
 <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="./js/jwplayer.js"></script>
 [/code]

If there is a better way to accomplish this I'm more than open to suggestions.

@DigiZAauthorMay 24.2016 — #Ok decided that we dropping the iOS thing, really not worth my time or heart ache trying to resolve the thing.iOS is a $!#&*(%^{^@#} os anyways hahahaha. (Personal opinion no flamage I promise).

@jdc20181Jun 22.2016 — #IOS isn't bad. In fact there is a way around everything you are wanting, but it depends.

And It really isn't good to use some options anyways. And is this in safari? Or on ALL ios browsers, there is opera, firefox, chrome etc. If it works on most of them, but not safari, well, give a message to users that you reccomend using a alternative browser.

That is the easiest way around it.

I use the Messages from here: http://isabelcastillo.com/error-info-messages-css#comment-46270

There are several ways to do this.

You can use a little javascript to detect, and then write the message.

Here is one: http://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari it doesn't give anything on the writing message part but for example you have <div id="SafariUser"></div> :

<i>
 </i>JS Code:
 Function safari()
 var isSafari = !!navigator.userAgent.match(/Version/[d.]+.*Safari/);
 if (isSafari) {
 document.getElementById('messageforsafariusers').innerHTML += 'Some new content!';
 }
 });

<i>
 </i>HTML Code:
 &lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;div id="messageforsafariusers"&gt;&lt;/div&gt;
 &lt;body onload="safari()"&gt;
 &lt;!--YourContent--&gt;
 &lt;/body&gt;
 &lt;/html&gt;

There ya go! (Wrote it all by hand with a help of some googling on how to detect!

@Kevin2Jun 23.2016 — #Probably of no help to the OP but @jdc20181:

Your code reminds me of the worst days of web design and development -- the [B]browser wars[/B] of the late '90s.

"Daddy what did you do during the browser wars?"

"Well son we had to write stuff like this":

&lt;SCRIPT LANGUAGE="JAVASCRIPT"&gt;
 if (navigator.appName == "Microsoft Internet Explorer") {
 document.write('&lt;LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="style"&gt;'); }
 if (navigator.appName == "Netscape") {
 document.write('&lt;LINK REL=stylesheet TYPE="text/css" HREF="stylesn.css" TITLE="style"&gt;');}
 &lt;/SCRIPT&gt;

Look vaguely familiar? Yes that 1997-era script is in my archives. It reminds me that if I'm sniffing for browsers with Javascript in 2016 I'm doing something wrong. In addition, if you are serving different content to different browsers you are liable to get slapped hard by Google et al.

And just to be nit-picky, this is invalid HTML:

[code=html]</head>
 <div id="messageforsafariusers"></div>
 <body onload="safari()">
 [/code]

I'll leave it to you to find out why. ?

@jdc20181Jun 25.2016 — #First of all I'm 16. Second of all its only a example. Thirdly it isn't even my code. Fourth not concerned with the code rather solving the issue fixes to code can be done later. I code mostly

In straight HTML5 and CSS I rarely touch JS. And the on load method is still used. and no you

Won't be because you can change the "compatible" CSS to a mobile version e.g Mobile JQuery.

And Google won't complain.

Idk how the 90's were with programming not concerned xD but I am only here to fix issues. Not give handouts but give ideas on how to go about it.

Also in #CSS _↴

problem in FF and fine in IE6 Fixed Background in a <div>Line-Height / Letter-Spacing

Success!

Help @DigiZA spread the word by sharing this article on Twitter...

Tweet This

iOS and CSS issue (Positioning)

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴