0

The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.

-Chrome: Firefox & Safari working fine

-Small Screen: Problem doesn't occur on larger monitors

-Toggling developer console on and off fixes the issue

user2483724
  • 2,089
  • 5
  • 27
  • 43
  • 1
    Any answers would just be guessing. Pinpoint the issue, then post if you still can't find the problem. – Carrie Kendall Jan 26 '15 at 23:39
  • I've had this issue before. Can you get it to happen while the developer tools are left open? Does it happen if you open the inspector in another window? – Alexander O'Mara Jan 26 '15 at 23:41

2 Answers2

0

It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.

My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.

Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.

thecraighammond
  • 800
  • 6
  • 10
  • You're right, the resizing of the window is what's "fixing" the issue. The changes in the UI are done through backbone routing. I think I will look into how backbone handles state changes and where CSS re-evaluation fits into that. – user2483724 Jan 26 '15 at 23:50
  • 1
    It's good that its sent you down the right track at least. Good luck! It can be a bit of a pain when nothing stands out. – thecraighammond Jan 27 '15 at 00:02
0

Looks like a long standing bug (years) with webkit:

How can I force WebKit to redraw/repaint to propagate style changes?

The solution that appeals to me is:

$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac

to force a redraw.

Community
  • 1
  • 1
user2483724
  • 2,089
  • 5
  • 27
  • 43