iPhone showing different results for my CSS overlay over image

user_6071704 0
Viewed 87

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 :)

css html
1 Answers

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 {
    ...
}
user_139815300
Related