All geek questions in one place

Why does a horizontal safari spill text over certain elements?

In Safari 7 on iOS and OSX, I have certain elements in which text overflows horizontally. These elements have their own text filled in by Angular Translate asynchronously. It seems that Safari does not understand that the contents of the changed element does not redraw it; Instead, children overflow horizontally.

enter image description here

+5
source share
1 answer

This is similar to the redraw / redraw problem that is known to happen with the Safari layout.

You can fix this with a couple of JavaScript lines that you want to disable as soon as the content loads:

var sel = document.querySelector('#myElement') sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);

This should redraw the window to the borders of its contents.

Replace '#myElement' with a CSS selector or CSS class to get your button. The trigger setting (as opposed to "none") prevents the element from flickering. The zero millisecond timeout value displayed on the screen is what actually causes the redraw.

Hope this helps.

+1
source

Source: https://habr.com/ru/post/1201977/

More articles:


All Articles