Skip to content

Commit f1ef93d

Browse files
staakystaaky
committed
Fixed the Chrome video glitch when toggling.
Added a workaround to fix the Chrome video glitch when removing an iframe, this happened when quickly toggling a video.
1 parent 4dbecce commit f1ef93d

2 files changed

Lines changed: 62 additions & 7 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "strip",
33
"title": "Strip",
4-
"version": "1.1.0.3",
4+
"version": "1.1.1",
55
"description": "A Less Intrusive Responsive Lightbox",
66
"author": {
77
"name": "Nick Stakenburg",

‎src/js/page.js‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -451,18 +451,73 @@ $.extend(Page.prototype, {
451451

452452

453453
removeVideo: function() {
454-
// NOTE: Chrome has a bug when removing
455-
// the iframe from the page as it is initializing content
456-
// this happens when you open a video and instantly close it,
457-
// but giving the iframe some time to initialize. An visible element
458-
// is kept on the page not accessible by the DOM.
459-
460454
if (this.playerIframe) {
461455
// this fixes a bug where sound keep playing after
462456
// removing the iframe in IE10+
463457
this.playerIframe[0].src = '//about:blank';
458+
459+
this.playerIframe.css({
460+
transform: 'translateZ(0px)'
461+
});
462+
464463
this.playerIframe.remove();
465464
this.playerIframe = null;
465+
466+
// WORKAROUND:
467+
// Chrome has a visual glitch when removing the iframe with video
468+
// from the page as it is initializing, this happens when you open a video
469+
// and instantly close it, but giving the iframe some time to initialize.
470+
// It keeps a visible element on the page not accessible by the DOM.
471+
//
472+
// a workaround is needed that forces a layout update, we do this on all
473+
// WebKit based browsers just in case
474+
//
475+
// further investigation is needed to file a proper bug report
476+
//
477+
if (Browser.WebKit && Support.css.transform) {
478+
// set translateZ on the html tag for a short duration.
479+
// best workaround we have right now
480+
481+
// first look for a possible restore value we've stored on the html tag
482+
var $html = $('html'),
483+
restoreStyle = $html.data('strip-restore-style'),
484+
cssProp = Support.css.prefixed('transform');
485+
486+
// if none was set find it
487+
if (!restoreStyle) {
488+
var style = $html.attr('style') || ' ';
489+
$html.data('strip-restore-style', style);
490+
restoreStyle = style;
491+
}
492+
493+
// this is the hack causing the layout update
494+
var css = {};
495+
css[cssProp] = 'translateZ(0px)';
496+
$html.css(css);
497+
498+
// restore the original style
499+
setTimeout(function() {
500+
if (restoreStyle === ' ') $html.removeAttr('style');
501+
else $html.attr('style', restoreStyle);
502+
$html.data('strip-restore-style', false);
503+
});
504+
505+
// alternative workaround, not liking the full page overlap
506+
/*var div;
507+
$(document.body).append(div = $('<div>').css({
508+
position: 'fixed',
509+
width: '100%',
510+
height: '100%',
511+
top: 0,
512+
left: 0,
513+
background: 'transparent'
514+
}));
515+
516+
setTimeout(function() {
517+
div.remove();
518+
});*/
519+
}
520+
466521
}
467522
},
468523

0 commit comments

Comments
 (0)