Results 1 to 7 of 7

Thread: iOS and CSS issue (Positioning)

  1. #1
    Join Date
    May 2016

    iOS and CSS issue (Positioning)

    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.

    #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);
    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.

  2. #2
    Join Date
    Mar 2012
    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?

  3. #3
    Join Date
    May 2016

    Thumbs up

    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

    <script type="text/javascript">
    var spots = [];
    var hotspots = document.getElementById('hotspots');
    var seeking = false;
    var player = jwplayer();
    // Load chapters / captions
      var r = new XMLHttpRequest();
      r.onreadystatechange = function() {
        if (r.readyState == 4 && r.status == 200) {
          var t = r.responseText.split("\n\n");
          for(var i=0; i<t.length; i++) {
            var c = parse(t[i]);
            if(c.href) {
    function parse(d) {
        var a = d.split("\n");
        var t = a[0];
        var i = t.indexOf(' --> ');
        var j = JSON.parse(a.join(''));
        return {
          begin: seconds(t.substr(0,i)),
          end: seconds(t.substr(i+5)),
          href: j.href,
          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 > 2) { r+= Number(a[a.length-3]) * 3600; }
      return r;
    // Highlight active spots
    player.onTime(function(e) {
      if(!seeking) {
    player.onSeek(function(e) {
      seeking = true;
    function setSpots(p){
      for(var j=0; j<spots.length; j++) {
        if(spots[j].begin <= p && spots[j].end >= 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";
            spots[j].show = true;
        } else if(spots[j].show) {
          spots[j].show = false;
    function popSpot(s) {
      var t = Math.round(Math.random()*800);
      }, t);
    function dropSpot(s) {
      var t = Math.round(Math.random()*400);
        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) {
        } else {
          window.open(s.href, "_blank");
    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;
    And then the document its getting all the hotspot locations from is the hotspots.vtt file, formatted as such
    00:01:05.000 --> 00:01:15.000
    "left": "60%",
    "top": "20%"
    I call the video in a div this way
    <div class="section" id="WatchMe">
    	<a href="#" onclick="self.close()" class ="closeIcon"><h1>Close <span class="headerTxt">Me</span> </h1></a>
    	<div id="player" data-video="testPlaylist.m3u8"></div>
    	<div id="hotspots"></div>
    <script type="text/javascript">
    	var playerInstance = jwplayer("player");
    		file: $("#player").data("video"),
    		image: "./imgs/logo_test.png",
    		stretching: "uniform",
    		aspectratio: "16:9",
    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

    <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>
    If there is a better way to accomplish this I'm more than open to suggestions.

  4. #4
    Join Date
    May 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).

  5. #5
    Join Date
    Apr 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...#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/3...-mobile-safari it doesn't give anything on the writing message part but for example you have <div id="SafariUser"></div> :

    JS Code:
    Function safari()
     var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
        if (isSafari) {
           document.getElementById('messageforsafariusers').innerHTML += 'Some new content!';
    HTML Code:
    <div id="messageforsafariusers"></div>
    <body onload="safari()">
    There ya go! (Wrote it all by hand with a help of some googling on how to detect!

  6. #6
    Join Date
    Oct 2013
    Probably of no help to the OP but @jdc20181:
    Your code reminds me of the worst days of web design and development -- the browser wars of the late '90s.
    "Daddy what did you do during the browser wars?"
    "Well son we had to write stuff like this":
    if (navigator.appName == "Microsoft Internet Explorer") {
        document.write('<LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="style">'); }
    if (navigator.appName == "Netscape") {
        document.write('<LINK REL=stylesheet TYPE="text/css" HREF="stylesn.css" TITLE="style">');}
    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:
    HTML Code:
    <div id="messageforsafariusers"></div>
    <body onload="safari()">
    I'll leave it to you to find out why.
    In dog beers I've only had one.

  7. #7
    Join Date
    Apr 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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09863 seconds
  • Memory Usage 2,922KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (8)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates