1

I'm building the web application which uses canvas surface on top of HTML body. I use canvas to draw border around SPANs. It works nearly perfectly but I still have a problem on the page load.

I've used chrome debugger and noticed that font style from css file is applied after script execution which confuses DOM getElementRects method and causes that the spans border is mispositioned after page is fully rendered. Below I'm attaching screenshots.

enter image description here enter image description here

Do you have any idea how to solve that? Can I wait on until css style is fully applied?

ghi
  • 697
  • 2
  • 9
  • 20

2 Answers2

1

Is $(document).ready() also CSS ready?

The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead all CSS files should be included before the scripts on the page. More Information

Make sure your scripts are on the bottom of the html page.

Community
  • 1
  • 1
Olaf
  • 1,038
  • 8
  • 20
1

Font loading takes some more time than css loading take help of following -> How to be notified once a web font has loaded

Community
  • 1
  • 1
anshuVersatile
  • 2,030
  • 1
  • 11
  • 18