Okay
  Public Ticket #883206
Problems on mobile Android and iOS visualizing the portfolio items
Closed

Comments

  • Paul started the conversation
    September 6, 2016 at 9:03pm

    How to reproduce the bug: Needs an Android or iPhone

    • go to http://ideasyespaciosec.com/proyectos/
    • click on any project. (not the 1st one, better the 4th one)
    • when you scroll up you can see there is a huge margin-top
    • If you click on the red button to go to the top. It goes to the beginning of the page at top so the user has to scroll down again in order to close the project.

    Expected behaviour: 

    • Not having the huge top margin
    • The button that goes to the top should work fine. That means if must go at the close button level


    On desktop it works great as intended even if the width is small like for mobiles.

    This problem only happens on Android and iOS. I attach some screenshots with chrome connected via USB to an android phone


  •  2,010
    Ocean replied
    September 7, 2016 at 7:09am

    Hi,

    1. huge top margin, I'll find solution for this issue and update soon.

    2. for button back to top, it doesn't support in popup. in my demo and my data it has style : z-index :1000 (when popup open button back to top display none) but in your website, i see it has style z-index :9999. you need to fixed it.

    You can add css code here http://www.awesomescreenshot.com/image/431375/60a65bbd73398f66ec983fe267a49737

    #back-to-top{z-index:1000;}


  • Paul replied
    September 10, 2016 at 1:23am

    Any update un the problem?

  •  2,010
    Ocean replied
    September 12, 2016 at 6:47am

    Hi, Sorry for the late, but i need to find and test the best solution. Ưill soon be updated for thí issue.

    Please waiting...

  • Paul replied
    September 20, 2016 at 5:20am

    Any update? My client really needs this bug to be solved...

  •  2,010
    Ocean replied
    September 20, 2016 at 8:30am

    Hello,

    Please send me link your website for check.

    Thanks

  • Paul replied
    September 20, 2016 at 6:31pm

    Really? You have to be kidding me. 

    I have sent you the link 2 weeks ago!!

    http://ideasyespaciosec.com/proyectos/


  •  2,010
    Ocean replied
    September 21, 2016 at 7:50am

    Hello paul,

    I has try find an solution for this issue, but still can't fixed issue.

    I has contact with author of this plugin magnific popup for help and not get answer.

    You can check magnific popup on mobile and it's same issue : http://dimsemenov.com/plugins/magnific-popup/ scroll to "Ajax popup" click on example : Load content via ajax. for a look at that.

    Thank you

  • Paul replied
    September 21, 2016 at 8:06pm

    I don't know where to apply the code exactly but this might help:

    https://github.com/dimsemenov/Magnific-Popup/issues/12

    Or you can tell me on which file I can put this code...

  •  2,010
    Ocean replied
    September 22, 2016 at 7:46am

    You can add to file "theme/archi/js/designesia.js"


  • Paul replied
    September 22, 2016 at 10:38pm

    I couldn't fix the issue as I don't have a big IT background. Please tell me when this issue will be solved. Thanks

  •  2,010
    Ocean replied
    September 23, 2016 at 7:38am

    Hello,

    Try fixed issue by :

    In file css : magnific-popup.css (with path : wp-content/archi/css/)

    .de_light .mfp-bg {
  background: #fff;
  opacity: .95;
  filter: alpha(opacity=95);
}
  
.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1559;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; 
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
}

html.mfp-helper {
  height: 100%;
  body {
    overflow: hidden;
    height: 100%;
    -webkit-transform: translateZ(0);
  }
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

    in file js : designesia.js (with path : wp-content/archi/js/)

    // --------------------------------------------------
    // magnificPopup
    // --------------------------------------------------
    
    jQuery('.simple-ajax-popup-align-top').magnificPopup({
        type: 'ajax',
        alignTop: true,
        overflowY: 'scroll',
        fixedContentPos: true,
        callbacks: {
            beforeOpen: function() { $('html').addClass('mfp-helper'); },
            close: function() { $('html').removeClass('mfp-helper'); }
        }
    });

    jQuery('.simple-ajax-popup').magnificPopup({
        type: 'ajax'
    });

    Thank you