From a6ebad008fd0a7c57449f31b0c23cdfb34060c22 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Fri, 21 Jun 2019 14:20:25 +0200
Subject: [PATCH 1/2] Remove will-change CSS rule for Overlay container

Fixes #9467
Fixes #9139

Chrome doesn't force a composition if the `will-change` CSS rule is different from `transform` or `opacity`.
See https://bugs.chromium.org/p/chromium/issues/detail?id=960953
---
 src/ol/ol.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/ol/ol.css b/src/ol/ol.css
index 6df635dcf0..039e25c1a8 100644
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -63,10 +63,6 @@
   border: 1px solid black;
 }
 
-.ol-overlay-container {
-  will-change: left,right,top,bottom;
-}
-
 .ol-unsupported {
   display: none;
 }

From 6e6a2cae0657dfd3d060cf1510214bf4325bc116 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Fri, 21 Jun 2019 14:33:26 +0200
Subject: [PATCH 2/2] Use version 4 TileJSON from mapbox

---
 examples/popup.html | 3 +++
 examples/popup.js   | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/examples/popup.html b/examples/popup.html
index eaa0924f63..f7496b7081 100644
--- a/examples/popup.html
+++ b/examples/popup.html
@@ -7,6 +7,9 @@ docs: >
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup"
+cloak:
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">
diff --git a/examples/popup.js b/examples/popup.js
index 308c9fd6c5..bb50da8fed 100644
--- a/examples/popup.js
+++ b/examples/popup.js
@@ -6,6 +6,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 /**
  * Elements that make up the popup.
@@ -45,7 +46,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
         crossOrigin: 'anonymous'
       })
     })