رفع مشکل تراز متن در مرورگر سافاری

گاها لازم است برای مرورگر خاصی استایل سفارشی در نظر گرفته شود یا به دلیل مشکلاتی که تنها بر روی یک مرورگر خاص وجود دارد نیاز به استایل سفارشی برای ان مرورگر جهت رفع مشکلات باشد. به طور مثال چندی پیش با بروز شدن مرورگر سافاری مشکلی برای فونت فارسی به وجود امده بود که با تراز کردن متن، متن ها از قسمت body خارج می شدند یا متن ها به هم ریخته و درهم نمایش داده می شد. البته این باگ با بروزرسانی ios نسخه ۱۰.۳ و برای مرورگرهای سافاری نسخه ۱۰.۱ به وجود آمده بود که با گزارش کاربران به اپل در بروزرسانی بعدی برطرف شد اما تا بروزرسانی اپل یک استایل سفارشی این مشکل را برطرف میکرد. با وجود اینکه تنها مرورگر سافاری نیاز به این استایل سفارشی داشت لازم بود استایل ها تنها برای این مرورگر به کار گرفته شود که این مهم با استفاده از قطعه کد زیر امکان پذیر شد.

افزودن کلاس safari به تگ body و سپس استایل دادن به تگ های مورد نظر با استفاده از کلاس safari.

افزودن کلاس safari یا کلاس دلخواه به تگ body در صورتی که مرورگر کاربر safari باشد.

<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 && 
    navigator.userAgent.indexOf('Chrome') == -1) {
        $("body").addClass("safari");
    }
var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
  $("body").removeClass("safari");
}
});
</script>

 استایل دادن به تگ ها با استفاده از کلاسsafari و کلاس تگ مورد نظر

<style>
.safari .myelementClass { /*  استایل دلخواه که فقط روی مرورگر سافاری قابل اجراست */
text-align:right; 
}
</style>

منابع:

https://discussions.apple.com/thread/7912165?start=0&tstart=0

https://stackoverflow.com/questions/5899783/detect-safari-using-jquery