So I'm writing an AngularJS app, and it's a dashboard. Ergo, it has several widgets, most of which are able to vary in size and display some kind of information from various categories the widgets cover.
To that end, when a widget is enlarged to 2x width, it adapts and uses -webkit-columns, columns etc. I first thought maybe this was causing the kind of rendering issue I'm talking about--but I've noticed it happen with widgets who aren't adopting that property too.
Simply put, if you scroll up/down and thereby hide some of the inner contents of a widget from the view, sometimes it will just seem to have glitched when you scroll back and either scramble UI renders together or just obliterate part of the content.
After digging around, I've tried forcing HW acceleration with
-webkit-transform: translateZ(0); and I've tried adding
-webkit-backface-visibility: hidden; to the items as well.
Does anyone know A) what causes this strange issue? and B) how does one go about fixing the issue?
Here's a picture showing a recent misdeed I witnessed: