2

Visual problem which shows the difference: https://ibb.co/k6dJqyp

Having issues with the overlay over the image, for the life of me I can't figure out why the iPhone has the overlay longer than the image.

I've tried testing it on multiple devices, cannot replicate the issue like on the iPhone. I've tried replicating on the browser dev tool phone resize, no luck there.

EDIT: problem solved, as safwan mentioned below, if you know which element to target, use the CSS safari hack and the change will implement on Safari :)

josh
  • 123
  • 1
  • 13

1 Answers1

2

Each browser applies CSS in a slightly different way. You can use CSS hacks to target only Safari as mentioned here, but that is quite complex. I suggest you use JavaScript to find out the browser. If you want to know how to exactly find the brower, check this post. But the actual function is below.

function findBrowser() {
    var ua = navigator.userAgent, tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem =  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+( tem[1] || '');
    }
    if(M[1] === 'Chrome'){
        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
        if(tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');            
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
}

if(findBrowser() === 'Safari 13') {
    document.querySelector('img').classList.add("inSafari"); 
}

Change 'Safari 13' to the version of Safari which is causing the problem.

Then, in your stylesheet:

.inSafari {
    ...
}
Safwan Samsudeen
  • 1,645
  • 1
  • 10
  • 25
  • BOOM, thank you, used the hack and it worked!, I knew which element i needed to change. – josh Aug 27 '20 at 03:38
  • Oh, that's great to hear. I edited it to use without the hack anyway. – Safwan Samsudeen Aug 27 '20 at 03:41
  • Does it make a difference if I leave the hack?, also if I change Safari 13 to the problem version, what about other versions? – josh Aug 27 '20 at 03:47
  • No, use the hack if it works. I haven't used it, so I wasn't sure if it would work. – Safwan Samsudeen Aug 27 '20 at 03:47
  • Ahh, all good, but yes :D! i knew the element which was causing the problem, I just didnt know how to change just safari without causing other issues on other browsers, but yes thank you, problem solved :D – josh Aug 27 '20 at 03:48