1

I have encountered a problem that really bother me , and after try all the methods, I still can´t find out a solution. The problem is offsetWidth is not show correctly in safari ,but in chrome and firefox just work well. The code is very easy, I just want to center the headline. So when window load, it´s not centered, that because title.style.left is 0. The curious thing is when I text console.dir(tile); it show offsetWidth is 662px, but console.log(title.offsetWidth); is 1170px, I don´t know why is showing different. And that causes title.style.left is 0. But the page works well in chrome and firefox.

So my question is :

1.why the offsetWith property is showing different is console.dir(title); and console.log(title.offsetWidth);

2.and how can i fix it in safari.

thanks very much in advance

(function(){



var  title = document.querySelector("header  h1");
   var header = document.querySelector("header");
    console.dir(title);
    console.log(title.offsetWidth);
    title.style.top=(header.offsetHeight-title.offsetHeight)/2  + "px";
    title.style.left=(header.offsetWidth-title.offsetWidth)/2 + "px";



function rePosition(){
title.style.top=(header.offsetHeight-title.offsetHeight)/2 + "px";
title.style.left=(header.offsetWidth-title.offsetWidth)/2 + "px";

}
Xin Jin
  • 11
  • 2
  • maybe you are firing the function too early. Try wrapping it in a `$(document).ready(function( your code here ))`. I suggest you to use jquery because the [javascript equivalent](https://stackoverflow.com/a/13456810/1498118) is pretty big. – a.barbieri May 30 '17 at 10:23
  • Yes, I´ve tried that too, it still no work properly in safari. But thank you for your advice:) – Xin Jin May 30 '17 at 11:27
  • Maybe is a crossbrowser issue. Try using the jQuery `outerHeight`. See [this](https://stackoverflow.com/a/34079072/1498118) for more details – a.barbieri May 30 '17 at 11:55
  • I have tried that too, in chrome it works fine, but it still not work in safari . – Xin Jin May 30 '17 at 12:14
  • The problem might be the compatibility of `console.dir` as it's [non-standard](https://developer.mozilla.org/en-US/docs/Web/API/Console/dir). What happens if you use `console.log` for both `title` and `title.width`? (You can look into `title` if you then click on it in the console inspector) – a.barbieri May 30 '17 at 12:19
  • 1
    Hhi,guys, i´ve solved the problem, the problem is the font, which I don´t know why, I used google font for the headline, but when I change the font to a default font of the browser, suddenly all work well in safari. – Xin Jin May 30 '17 at 13:04
  • 1
    I see. This is due to the script running before the Google font is loaded. If you want to use Google Font you need to wait `document.fonts.ready`. See [this](https://stackoverflow.com/a/32292880/1498118) – a.barbieri May 30 '17 at 13:08
  • Yes, I think that´s the problem. Thank you so much! – Xin Jin May 30 '17 at 13:13
  • @a.barbieri. I believe this is the answer because it solved my problem so please post as answer for others that might have this issue. Thanks! – Manny Alvarado Dec 10 '20 at 17:43

1 Answers1

0

This is due to the script running before the Google font is loaded. If you want to use Google Font you need to wait document.fonts.ready.

document.fonts.ready.then(function () {
  alert('All fonts in use by visible text have loaded.');
  alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // true
});

Credits: https://stackoverflow.com/a/32292880/1498118

a.barbieri
  • 1,810
  • 22
  • 47