diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts
index bcb7e3a537..42e2f87d93 100644
--- a/src/ui/control/attribution_control.test.ts
+++ b/src/ui/control/attribution_control.test.ts
@@ -10,27 +10,27 @@ function createMap() {
             version: 8,
             sources: {},
             layers: [],
-            owner: 'mapbox',
-            id: 'streets-v10',
+            owner: 'mapblibre',
+            id: 'demotiles',
         },
         hash: true
     }, undefined);
 }
 
-describe('AttributionControl', () => {
-    let map;
+let map;
 
-    beforeEach(() => {
-        setWebGlContext();
-        setPerformance();
-        setMatchMedia();
-        map = createMap();
-    });
+beforeEach(() => {
+    setWebGlContext();
+    setPerformance();
+    setMatchMedia();
+    map = createMap();
+});
 
-    afterEach(() => {
-        map.remove();
-    });
+afterEach(() => {
+    map.remove();
+});
 
+describe('AttributionControl', () => {
     test('appears in bottom-right by default', () => {
         map.addControl(new AttributionControl());
 
@@ -264,109 +264,185 @@ describe('AttributionControl', () => {
         });
     });
 
-    test('details is set correct for compact view after map load. In particular, it should NOT contain the attribute open="".', () => {
-        const attributionControl = new AttributionControl({
-            compact: true
+});
+
+describe('AttributionControl test regarding the HTML elements details and summary', () => {
+    describe('Details is set correct for compact view', () => {
+        test('It should NOT contain the attribute open="" on first load.', () => {
+            const attributionControl = new AttributionControl({
+                compact: true
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
         });
-        map.addControl(attributionControl);
 
-        expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
-NodeList [
-  <details
-    class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty"
-  >
-    <summary
-      aria-label="Toggle attribution"
-      class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
-      title="Toggle attribution"
-    />
-    <div
-      class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
-    />
-  </details>,
-]
-`);
-    });
+        test('It SHOULD contain the attribute open="" after click on summary.', () => {
+            const attributionControl = new AttributionControl({
+                compact: true
+            });
+            map.addControl(attributionControl);
+            const container = map.getContainer();
+            const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-    test('details is set correct for compact view after click on summary. In particular, it SHOULD contain the attribute open="".', () => {
-        const attributionControl = new AttributionControl({
-            compact: true
+            simulate.click(toggle);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
-        map.addControl(attributionControl);
-        const container = map.getContainer();
-        const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-        simulate.click(toggle);
+        test('It should NOT contain the attribute open="" after two clicks on summary.', () => {
+            const attributionControl = new AttributionControl({
+                compact: true
+            });
+            map.addControl(attributionControl);
+            const container = map.getContainer();
+            const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
+
+            simulate.click(toggle);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
-        expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
-NodeList [
-  <details
-    class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty maplibregl-compact-show mapboxgl-compact-show"
-    open=""
-  >
-    <summary
-      aria-label="Toggle attribution"
-      class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
-      title="Toggle attribution"
-    />
-    <div
-      class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
-    />
-  </details>,
-]
-`);
+            simulate.click(toggle);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+        });
     });
 
-    test('details is set correct for compact view after two clicks on summary. In particular, it should NOT contain the attribute open="".', () => {
-        const attributionControl = new AttributionControl({
-            compact: true
+    describe('Details is set correct for default view (compact === undefined)', () => {
+        test('It should NOT contain the attribute open="" if offsetWidth <= 640.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
         });
-        map.addControl(attributionControl);
-        const container = map.getContainer();
-        const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-        simulate.click(toggle);
-        simulate.click(toggle);
+        test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+        });
+
+        test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
-        expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
-NodeList [
-  <details
-    class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty"
-  >
-    <summary
-      aria-label="Toggle attribution"
-      class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
-      title="Toggle attribution"
-    />
-    <div
-      class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
-    />
-  </details>,
-]
-`);
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+        });
+
+        test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+        });
+
+        test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+        });
+
+        test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+            });
+            map.addControl(attributionControl);
+            const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button');
+            simulate.click(toggle);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+        });
     });
 
-    test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => {
-        const attributionControl = new AttributionControl({
+    describe('Details is set correct for default view (compact === false)', () => {
+        test('It SHOULD contain the attribute open="" if offsetWidth <= 640.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+                compact: false
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
-        map.addControl(attributionControl);
 
-        expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
-NodeList [
-  <details
-    class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-attrib-empty mapboxgl-attrib-empty maplibregl-compact mapboxgl-compact"
-    open=""
-  >
-    <summary
-      aria-label="Toggle attribution"
-      class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
-      title="Toggle attribution"
-    />
-    <div
-      class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
-    />
-  </details>,
-]
-`);
+        test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            const attributionControl = new AttributionControl({
+                compact: false
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+        });
+
+        test('The attribute open="" should NOT change on resize.', () => {
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            const attributionControl = new AttributionControl({
+                compact: false
+            });
+            map.addControl(attributionControl);
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+
+            Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
+            map.resize();
+
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
+        });
     });
 });
diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts
index 27aa152d21..66466530dc 100644
--- a/src/ui/control/attribution_control.ts
+++ b/src/ui/control/attribution_control.ts
@@ -48,8 +48,6 @@ class AttributionControl implements IControl {
     }
 
     onAdd(map: Map) {
-        const compact = this.options && this.options.compact;
-
         this._map = map;
         this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib');
         this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container);
@@ -57,21 +55,12 @@ class AttributionControl implements IControl {
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
         this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container);
 
-        if (compact) {
-            this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
-        } else {
-            this._container.setAttribute('open', '');
-        }
-
+        this._updateCompact();
         this._updateAttributions();
 
         this._map.on('styledata', this._updateData);
         this._map.on('sourcedata', this._updateData);
-
-        if (compact === undefined) {
-            this._map.on('resize', this._updateCompact);
-            this._updateCompact();
-        }
+        this._map.on('resize', this._updateCompact);
 
         return this._container;
     }
@@ -167,10 +156,21 @@ class AttributionControl implements IControl {
     }
 
     _updateCompact() {
-        if (this._map.getCanvasContainer().offsetWidth <= 640) {
-            this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
+        const compact = this.options && this.options.compact;
+        if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) {
+            if (compact === false) {
+                this._container.setAttribute('open', '');
+            } else {
+                if (!this._container.classList.contains('maplibregl-compact')) {
+                    this._container.removeAttribute('open');
+                    this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
+                }
+            }
         } else {
-            this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show');
+            this._container.setAttribute('open', '');
+            if (this._container.classList.contains('maplibregl-compact')) {
+                this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show');
+            }
         }
     }