Chrome - Fokus auf Iframe-Eingaben verursacht unnötiges Scrollen

Ich habe Tage damit verbracht, eine Lösung zu finden, aber kein Glück. Ich bin mir bewusst, dass dies ein Chrome-Bug sein könnte, aber ich brauche Hilfe.Chrome - Fokus auf Iframe-Eingaben verursacht unnötiges Scrollen

Es ist eine Web-App, die über Backbones und Unterstriche aufgebaut ist. Ich benutze das Eulenkarussell, um die iframes zu laden.

Struktur:

<div id="main"> 
    <div class="viewer-container"> 
     <!-- iframe loaded here --> 
    </div> 
    <div class="controls"> 
     <!-- Controls/Buttons --> 
     next 
     previous 
     menu 
     fullscreen 
    </div> 
</div>

Szenario: Wenn an einem Eingang wie eine ausgewählte Option klicken, Chrome scrollt die iframe Gott weiß wo. Seltsamerweise (kann nicht bestätigen, aber raten), ist es erwähnenswert, dass dieses Scroll-Verhalten möglicherweise passieren kann, wenn ich die Steuerelemente verwende, die außerhalb des Iframes liegen.

Ich habe das gleiche Problem beim Drücken Tab nur in Chrome, als Ergebnis habe ich die Registerkarte deaktiviert.

Firefox dev.edition scheint nur die Auswahloptionen an den Rand des Bildschirms verschieben, aber der iframe bleibt gesetzt. Siehe 3. Screenshot.

Die Iframes enthalten eine HTML-Seite mit Inline-JS und CSS.

Ich habe versucht:

Unbind/bind die Kontrollen
Iframe.click
Focus auf dem iframe, Eingang vor und nach den Kontrollen,
backface-visibility: hidden

Chrome-Version: Version 49.0.2623.87 (64-Bit) Firefox Version: FF developr Ausgabe 47.0a2 (2016.03.21) OS:

Screenshots Alle:

Vor Klick:

Nach Klick:

FF:

var iframeDoc = $('#'+iframe.id).contents().get(0); 
$(iframeDoc).on('click', function() { 
//on('click, change, focus... 
    $(iframeDoc).focus(); 
    $(iframeDoc).click(); 
    $(this).css({ 
    '-webkit-backface-visibility' : 'hidden', /* Chrome, Safari, Opera */ 
    'backface-visibility': 'hidden' 
    }); 
});

Navigation:

/** 
* Add events for carousel navigation. (Back and forward buttons) 
*/ 
carouselControls: function(){ 
    var self = this; 

    if($('#viewer-container').hasClass('fullscreen')) { 
    $('.navigation-btn').hover(this.showControls, this.hideControls); 
    } 

    $('#navigation-btn-back').unbind('click').on('click', function(){ 
    self.slider.trigger('prev.owl.carousel'); 
    self.loadFour(); 
    }); 

    $('#navigation-btn-forward').unbind('click').on('click', function(){ 
    self.slider.trigger('next.owl.carousel'); 
    self.loadFour(); 
    }); 
    $('#fullscreen-button').on('click', function(){ 
    self.slider.trigger('refresh.owl.carousel'); 
    self.loadFour(); 
    }); 
},

Verwandte Informationen: input tab focus chromium issue

Was ist der Problem? Irgendwas mit meinem Code? Die Browser? Kann ich programmgesteuert etwas dagegen tun?

Danke fürs Lesen.

Quelle

2016-03-22 Abdul Sadik Yalcin

Follow-up: https://bugs.chromium.org/p/chromium/issues/detail?id=597254&q=iframe&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner % 20Summary% 20OS% 20Modifiziert –

Chrome - Fokus auf Iframe-Eingaben verursacht unnötiges Scrollen

Antwort

Verwandte Themen