Safari ignores css dir="ltr" after switcing css files

Question

I added English for my website so it will support 2 languages. On the first language, I use css file where everything is RTL. Now, when i switch to English, I remove the RTL css file and add a css file where dir is LTR. On Chrome, IR and Firefox it works fine. But on Safari (I tried only mobile safari) it partaily ignores the LTR. You can see it here: http://parkplanner.co.il/ and use the 'English' button on the menu to change language.

This is the LTR css file - http://parkplanner.co.il/css/ltr-adj.css

Thanks!

issue exists for desktop safari too.. just checked with your website — Sunil B N, Apr 23 '15 at 07:56

score 1 · Accepted Answer · answered Apr 23 '15 at 07:47

1

use direction:ltr; not the dir attribute

answered Apr 23 '15 at 07:47

odedta

2,430
4
24
51

score 0 · Answer 2 · edited May 23 '17 at 12:22

This looks like well known issue. Read the thread. Force DOM redraw/refresh on Chrome/Mac

// in jquery $('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js document.getElementById('parentOfElementToBeRedrawn').style.display = 'none'; document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

If this simple redraw doesn't work you can try this one. It inserts an empty text node into the element which guarantees a redraw.

var forceRedraw = function(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

Safari ignores css dir="ltr" after switcing css files

2 Answers2