Search code examples
google-chromewebkitng-dialog

Chrome/Webkit UI repaint issue when showing a modal window (ngDialog)

I'm working on a hybrid app using Cordova, Bootstrap and Angular JS (1.3.x) and testing it in a Chrome desktop browser and on a Android device (lollipop, 5.0.2).

In a particular view, I open a modal window using ngDialog. The content in this dialog can exceed the height of a typical smartphone size, so vertical scrolling is required. And here comes the problem:

Most of the elements that should be displayed at the bottom of the dialog (out of initial sight) do not appear or don't getting rendered. When I blindly tap on the area where the disappeared interactive elements should be, they will get painted. When I then scroll up again, elements at the top disappear. This behavior didn't exist on Android 4.4.

Now I'm able to reproduce this error on my Windows Chrome Browser (v43).

These are the steps:

  1. Run this Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
  2. Test with a recent Chrome Version
  3. Make sure, this plunker is shown in embedded view (important)
  4. Open Chrome developer tools
  5. Click "Toggle device mode" (smartphone icon) (important)
  6. Limit the vertical resolution to about 600px in height Click "open dialog" and scroll down to the bottom
  7. Can you read "Hello, do you see me?" ?
  8. If not, press on one of the panels on top or below the textbox, this will cause a repaint and you can see the text.

This is how it looks:

Not OK -> No text in marked red boxes: Not OK -> No text in marked red boxes

OK -> After clicks on it or browser tab switch OK -> After clicks on it or browser tab switch

I found this article on postman blog, but the "fixer" does not seem to work in my case. http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

Can someone point me to the right direction?

Solution

  • I followed the instructions in the linked blogpost and those seem to work for me. Specifically, adding

    -webkit-transform: translate3d(0,0,0);

    to my CSS for ngDialog-content which has overflow-y: scroll.

    Now the div scrolls on load for me.

    The other good news is that at least my issue seems to be gone in Chrome Canary, so it may be worth seeing if the issue still exists for you there.