Mapbox-gl-js: Map flickers/bounces when animating in unfocused iframe on Chrome 61

[lamuertepeluda]

Hi there,

When zooming in/out (wheel, or animations like flyTo) the map flickers and "bounces" in and out.

Steps to Trigger Behavior

the bug is visible with the main example (or also other examples, e.g. geocode) since v0.40.1. Using v0.39.1 I don't have this behavior.

My System:
iMac 16,2 (late 2015)
Browser: Chrome 61.0.3163.91 64bit

The problem is less evident when using Safari (10.1.2 ) and Firefox (55.0.3), although minimal flickering still occurs.

Please look at the screen capture at this link (I tried to make a gif but it cuts some frames out and renders poorly).

Expected Behavior

Smooth animations like in v0.39.1.

Actual Behavior

The animation is jerky, the map flickers and "bounces" in and out while zooming.

[ChrisLoer]

I can reproduce this using the example page, but not in a map outside of an iframe. I see the same behavior between v0.39.1 and v0.40.1 -- for me the change that made the problem appear was to upgrade Chrome from v60 to v61. I can't reproduce on Safari or Firefox (although there are some other potential causes of flickering you might be noticing?).

As in #5335, the problem goes away when I pan the map (but returns every time I switch tabs or switch apps and then come back to the problematic map). No clue yet what's causing this, but we're investigating.

[ChrisLoer]

@lamuertepeluda Have you seen this behavior anywhere outside of our examples?

[lamuertepeluda]

@ChrisLoer it's even stranger! It happens only on the example website page! 😮

After you pointed me to the possible iframe issue, I tried the following:

• upgrade mapbox from 0.39.1 to 0.40.1 on some sample code of mine without iframe: works without flickering ✅
• upgrade mapbox from 0.39.1 to 0.40.1 on some sample code of mine inside an iframe: works without flickering ✅
• example code served locally outside an iframe: works without flickering ✅
• example code served locally inside an iframe: works without flickering ✅
• go to the official examples page: flickers! ❌ 😵

So I think this issue can be safely marked as "oddity" or something like that, but probably it is only relevant for the examples page when browsing with Chrome 61 😅

[lamuertepeluda]

btw it may be completely unrelated but I see the Chrome "plugins-blocked" popup activating all the time I browse the mapbox website (including examples), telling me that it has blocked Flash Player (and even if I consent, it wouldn't start)

[ChrisLoer]

@lamuertepeluda Thanks for digging in to the issue! It sounds like you're seeing the same behavior I am. I still haven't isolated what makes our examples page "special" but I definitely want to get to the bottom of it. Further things I've noticed from testing this:

• The flicker only happens when the focus is outside the example's iframe (this is why panning the map makes the problem go away until you next click outside the frame).
• The flicker happens on render frames that take longer than 16.7ms to render. Normally, if the browser is displaying frames at 60fps and a frame takes longer than 16.7ms to render, it will keep showing the _current_ frame a second time. Instead, in this case, it seems to be showing the _previous_ frame.

[ChrisLoer]

Without actually discovering the underlying mechanism or even tightly defined conditions for reproducing the problem, I found that the problem went away in our examples when I removed the overflow: hidden property from the div containing the iframe containing the map in our examples. This is consistent with the vague hypothesis that the flicker has "something to do with Chrome's throttling of animation for iframes it doesn't think are visible".

We'll update the examples with the workaround. Ideally, we'll be able to nail down the circumstances that cause the problem and either file a bug report with Chromium or at least post clear workaround guidance for mapbox users who might be affected.

[jd327]

For me, when I zoom in/out, the map doesn't seem to bounce, but it sure does flicker. Here's a quick screen capture (the map is not within an iframe, but the zoom controls are in their own iframe placed on top of the map).

https://s3.amazonaws.com/2c42e5cf1cdbafea04ed267018ef1511/8273827482748.gif (sorry it's 35MB)

Notice that as long as I hold the mouse over the iframed controls, the labels don't appear (or just flicker). But as soon as I move the mouse over the map, the labels appear correctly. It only seems to flicker / get stuck when my cursor is on that iframe with zoom controls.

Just noticed it as soon as I upgraded to Chrome 61 (does not happen on FF, and didn't notice on Chrome 60).

Edit: also this is 0.40.1, but I get the same results in 0.39.1 too.

[ChrisLoer]

@ivanakimov It sure sounds like what you're seeing is probably being triggered by the same underlying change in Chrome 61, but it's a bit of a different manifestation from what we were able to reproduce. Is there any chance you could put together a JSFiddle that reproduces the behavior you're seeing?

[hughlomas]

This is occurring for us in a non-iframe situation on macos 10.13 with chrome 61.0.3163.100 and also a problem when testing chrome canary 63.0.3226.0.

Using ChrisLoer's comment regarding overflow: hidden, we removed all overflow:hidden on ancestor elements of the map element, and the flickering stopped. We then re-enabled them one at a time. For some reason removing overflow: hidden on the ~7th ancestor parent stopped the flickering, even while the ~2nd and ~4th ancestors still retained overflow: hidden.

I'm not sure what the distinguishing factor is, the 7th ancestor isn't a particularly interesting element from a CSS perspective, nothing crazy like position: static or anything. The output of the chrome computed style tab for the 7th ancestor is:

border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
box-shadow:rgba(0, 0, 0, 0.3) 0px 1px 5px 1px;
box-sizing:border-box;
color:rgb(18, 18, 18);
display:flex;
flex-direction:column;
font-family:"Open Sans", sans-serif;
font-size:14px;
font-weight:300;
height:587px;
line-height:20px;
margin-bottom:0px;
margin-left:643px;
margin-right:643px;
margin-top:0px;
max-width:450px;
overflow-x: hidden;
overflow-y: hidden;
pointer-events:all;
position:relative;
text-rendering:optimizeSpeed;
text-size-adjust:100%;
user-select:none;
width:450px;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

The fact that it's the 7th ancestor is obviously arbitrary, what confuses me is that there are elements between the map element and the 7th element with overflow: hidden, yet removing overflow: hidden on the 7th causes the flickering to stop.

Anyway, hope this helps debug in some fashion.

[ChrisLoer]

Thanks, @hughlomas! I don't know what to make of that, but it's good to collect as much info as we can...

[hughlomas]

Well for one it suggests that the issue is unrelated to iframes. Secondly, it indicates that overflow-hidden in some ancestors doesn't necessarily cause flickering.

I don't know enough about the rendering engine to have any insight into why disabling overflow-hidden on higher ancestors but not others fixes the issue.

[jd327]

Well, so far I can't reproduce with a simple Codepen ( https://codepen.io/ivanakimov/pen/KXmEVv ).
But, I did remove overflow: hidden; from the map container and it started working fine again... :confused:

[joshandrews]

We hit this bug (chrome 61.0.3163.100) by putting a border-radius on the mapboxgl canvas. Moving the border radius to a parent with overflow: hidden also repros this.

[ChrisLoer]

@joshandrews That's interesting. How simple is the border-radius repro case you have? Is it possible to turn into a codepen or jsfiddle?

[hughlomas]

@joshandrews We were still encountering this bug in a different location, and couldn't resolve it even by removing all overflow: hidden.

After reading your comment, we checked our map and there was a high-level rule applying border-radius to the map and many of its ancestors. Removing the border-radius instantly fixed the issue for us. Thanks!

[jtphan14]

@hughlomas - THANK YOU SO MUCH! I've been dealing with the same issue and the border-radius fixed the issue for me too!

[joshandrews]

@ChrisLoer I created a fiddle for it: https://jsfiddle.net/rgav3ykj/1/ - just add your accessToken. You can also remove overflow: hidden and leave the border-radius to see the same effect, but it seems to be exaggerated by the overflow: hidden.

[ChrisLoer]

@joshandrews Thank you! That's a super simple case and it reproduces for me.

[mvelker]

We are experiencing severe flickering and bouncing as well on zoom. Will probably mean we have to kill this map feature as map bounces when trying to zoom, stutters when dragging to pan and flickers highest zoom level when zooming in close. Overall performance has degraded dramatically but this same code had no issue a couple of months ago. Any ideas what might be the culprit? We do not have overflow: hidden or border-radius on any of the Mapbox elements. Chrome version 61.0.3163.100

[hughlomas]

@mvelker Do you have overflow or border-radius on any of the ancestor elements (parents or grandparents or great-grandparents, etc)?

[mvelker]

@hughlomas No -- we don't have any of these attributes on the map element itself or its parents. It's also not being rendered in an iFrame. Inexplicably, the performance seems to have improved again today. Could this issue be related to problems with Mapbox's tile server? It's odd that performance would change so dramatically with no changes to library versions or code.

[lbud]

This is definitely a Chrome 61 bug — I created a reduced pure-WebGL (no library) example and filed here: https://bugs.chromium.org/p/chromium/issues/detail?id=773337

Starring that issue in the Chromium tracker may help prioritize :)

[mvelker]

@lbud Done. Thanks for the quick response. Congrats on closing the new fundraising.

[jfirebaugh]

The Chrome bug has been fixed for the next release (62). 🎉

[zhali]

@jfirebaugh #5490 is a different issue