2017-11-23 11 views
0

Ich spielte mit ResizeObserver (das wird von Google Chrome hinter experimenteller Webplattform-Flag unterstützt). Ich habe Codepen-Demo mit jQuery UI resizierbar erstellt. Es funktioniert gut auf Chrom-Linux, aber unter Windows stoppt es nach einer Weile oder nur einmal ausgeführt.ResizeObserver funktioniert nicht wie erwartet unter Windows

Mein Code sieht wie folgt aus:

$('#node').css({ 
    width: 140, 
    height: 50 
}).resizable(); 

function resizer(node, callback) { 
    if (window.ResizeObserver) { 
    var resizer = new ResizeObserver(function(entries) { 
     callback(entries[0]); 
    }); 
    resizer.observe(node); 
    return() => resizer.unobserve(node); 
    } else { 
    return() => undefined; 
    } 
} 
resizer(document.querySelector('.content'), function(entry) { 
    var width = entry.contentRect.width; 
    var height = entry.contentRect.height 
    console.log(width + 'x' + height); 
    // custom event found on 
    // https://ebidel.github.io/demos/dom_resize_events.html 
    entry.target.dispatchEvent(new CustomEvent('resize', { 
    detail: {width,height} 
    })); 
}); 
document.querySelector('.content').addEventListener('resize', (e) => { 
    console.log(e.detail); 
}); 

Ich versuche haben den Browser öffnen/schließen Entwickler-Tools auch laden Sie die Dateien auf dem lokalen Laufwerk, und öffnen Sie mit Datei-Protokoll und bekam die gleichen Ergebnisse neu zu starten.

die google chrome example funktioniert gut,

hier ein my pen

Antwort

0

ist Es scheint, dass der Beobachter Garbage Collected erhalten, das Hinzufügen

var r; 
... 
function resizer(node, callback) { 
    ... 
    var resizer = new ResizeObserver(...); 
    r = resizer; 
    ... 
} 

das Problem gelöst

+0

Dies ist ein Chrome Bug war für ein paar Monate. Dies sollte nicht mehr notwendig sein. crbug.com/735830 –

Verwandte Themen