Bug 173768 – [GTK] Some web pages disappear immediately after rendering

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Michael Catanzaro]

This is a recent regression, from the past couple of months. Some web pages render fine, then immediately disappear. For example:

http://midori-browser.org/

It's happening on various other websites too, so it's a major problem, but I don't remember them off the top of my head. Pretty sure we already have a bug report for this somewhere, but I'm having trouble finding it.

[Michael Catanzaro]

Forgot to mention: it happens when running with both WEBKIT_DISABLE_COMPOSITING_MODE=1 and WEBKIT_FORCE_COMPOSITING_MODE=1.

[Michael Catanzaro]

*** Bug 173816 has been marked as a duplicate of this bug. ***

[Carlos Garcia Campos]

(In reply to Michael Catanzaro from comment #0)
> This is a recent regression, from the past couple of months. Some web pages
> render fine, then immediately disappear. For example:
> 
> http://midori-browser.org/
> 
> It's happening on various other websites too, so it's a major problem, but I
> don't remember them off the top of my head. Pretty sure we already have a
> bug report for this somewhere, but I'm having trouble finding it.

I don't think this is a regression in WebKit, then, because I can reproduce with old versions. I started to go back with the idea of bisecting, but I've just tried with 2.13.4 and I can reproduce the issue with the midori website. So, I think it might be a regression in one of the dependencies.

[Carlos Garcia Campos]

It happens with AC disabled, as Michael said, and it happens in both X11 and Wayland. It doesn't happen in WPE using the same versions of cairo, pixman, etc. So, I'm a bit lost.

[Carlos Garcia Campos]

It doesn't happen when disabling javascript

[Carlos Alberto Lopez Perez]

On the case of the midori website its triggered by the JS included from modernizer.

If you add this line to your /etc/hosts

127.0.0.1 cdn.jsdelivr.net

And open a new session with the minibrowser (using a temp profile to avoid caching issues)

HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk --enable-write-console-messages-to-stdout=true http://midori-browser.org/

Now it renders correctly.

Remove that line back from /etc/hosts, repeat the experiment and white page.


The JS included in question is this one: http://cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,colorbox,jquery.autosize,jquery.equalize,jquery.downboy


Perhaps is related to the jquery.autosize plugin? I get this error on the console:

CONSOLE ERROR TypeError: $('textarea.resize').autosize is not a function. (In '$('textarea.resize').autosize()', '$('textarea.resize').autosize' is undefined)

[Carlos Garcia Campos]

(In reply to Carlos Alberto Lopez Perez from comment #6)
> On the case of the midori website its triggered by the JS included from
> modernizer.
> 
> If you add this line to your /etc/hosts
> 
> 127.0.0.1 cdn.jsdelivr.net
> 
> And open a new session with the minibrowser (using a temp profile to avoid
> caching issues)
> 
> HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk
> --enable-write-console-messages-to-stdout=true http://midori-browser.org/
> 
> Now it renders correctly.
> 
> Remove that line back from /etc/hosts, repeat the experiment and white page.
> 
> 
> The JS included in question is this one:
> http://cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,colorbox,jquery.
> autosize,jquery.equalize,jquery.downboy
> 
> 
> Perhaps is related to the jquery.autosize plugin? I get this error on the
> console:
> 
> CONSOLE ERROR TypeError: $('textarea.resize').autosize is not a function.
> (In '$('textarea.resize').autosize()', '$('textarea.resize').autosize' is
> undefined)

The same warning is shown in WPE too.

[Carlos Alberto Lopez Perez]

The warnings are unrelated.

Definitively, the problem is triggered by the JS from modernizr.

Try:

1) Render white
HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk --enable-write-console-messages-to-stdout=true https://people.igalia.com/clopez/wkbug/173768/midori/m1.html


2) Render ok
HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk --enable-write-console-messages-to-stdout=true https://people.igalia.com/clopez/wkbug/173768/midori/m2.html



And the only difference is:

$ diff -u <(curl -s https://people.igalia.com/clopez/wkbug/173768/midori/m1.html) <(curl -s https://people.igalia.com/clopez/wkbug/173768/midori/m2.html)
--- /dev/fd/63	2017-06-26 15:04:55.167486031 +0200
+++ /dev/fd/62	2017-06-26 15:04:55.175486109 +0200
@@ -1682,10 +1682,10 @@
 
 	<!-- JSDelivr -->
 	<!--[if lt IE 9]>
-		<script>jQl.loadjQ('//cdn.jsdelivr.net/g/modernizr,selectivizr,prefixfree,jquery@1.11.0,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
+		<script>jQl.loadjQ('//cdn.jsdelivr.net/g/selectivizr,prefixfree,jquery@1.11.0,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
 	<![endif]-->
 	<!--[if IE 9]><!-->
-		<script>jQl.loadjQ('//cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
+		<script>jQl.loadjQ('//cdn.jsdelivr.net/g/prefixfree,jquery,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
 	<!--<![endif]-->
 
 	<!-- Scripts -->
@@ -1711,6 +1711,6 @@
 		});
 	</script>
 
-<script src="http://cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,colorbox,jquery.autosize,jquery.equalize,jquery.downboy"></script></head>
+<script src="http://cdn.jsdelivr.net/g/prefixfree,jquery,colorbox,jquery.autosize,jquery.equalize,jquery.downboy"></script></head>
 
 </html>



The JS in question is this: http://cdn.jsdelivr.net/g/modernizr

[Carlos Garcia Campos]

(In reply to Carlos Alberto Lopez Perez from comment #8)
> The warnings are unrelated.
> 
> Definitively, the problem is triggered by the JS from modernizr.
> 
> Try:
> 
> 1) Render white
> HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk
> --enable-write-console-messages-to-stdout=true
> https://people.igalia.com/clopez/wkbug/173768/midori/m1.html
> 
> 
> 2) Render ok
> HOME=$(mktemp -d) Tools/Scripts/run-minibrowser --gtk
> --enable-write-console-messages-to-stdout=true
> https://people.igalia.com/clopez/wkbug/173768/midori/m2.html
> 
> 
> 
> And the only difference is:
> 
> $ diff -u <(curl -s
> https://people.igalia.com/clopez/wkbug/173768/midori/m1.html) <(curl -s
> https://people.igalia.com/clopez/wkbug/173768/midori/m2.html)
> --- /dev/fd/63	2017-06-26 15:04:55.167486031 +0200
> +++ /dev/fd/62	2017-06-26 15:04:55.175486109 +0200
> @@ -1682,10 +1682,10 @@
>  
>  	<!-- JSDelivr -->
>  	<!--[if lt IE 9]>
> -	
> <script>jQl.loadjQ('//cdn.jsdelivr.net/g/modernizr,selectivizr,prefixfree,
> jquery@1.11.0,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</
> script>
> +	
> <script>jQl.loadjQ('//cdn.jsdelivr.net/g/selectivizr,prefixfree,jquery@1.11.
> 0,colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
>  	<![endif]-->
>  	<!--[if IE 9]><!-->
> -	
> <script>jQl.loadjQ('//cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,
> colorbox,jquery.autosize,jquery.equalize,jquery.downboy');</script>
> +	
> <script>jQl.loadjQ('//cdn.jsdelivr.net/g/prefixfree,jquery,colorbox,jquery.
> autosize,jquery.equalize,jquery.downboy');</script>
>  	<!--<![endif]-->
>  
>  	<!-- Scripts -->
> @@ -1711,6 +1711,6 @@
>  		});
>  	</script>
>  
> -<script
> src="http://cdn.jsdelivr.net/g/modernizr,prefixfree,jquery,colorbox,jquery.
> autosize,jquery.equalize,jquery.downboy"></script></head>
> +<script
> src="http://cdn.jsdelivr.net/g/prefixfree,jquery,colorbox,jquery.autosize,
> jquery.equalize,jquery.downboy"></script></head>
>  
>  </html>
> 
> 
> 
> The JS in question is this: http://cdn.jsdelivr.net/g/modernizr

I've debugged this a bit more, trying to isolate the part of the modernizr code that is causing this and I've found they there are the audio and video tests. The problem seem to be the use of canPlayType, but I have no idea why.

Modernizr.addTest("audio", function() {
        var A = createElement("audio"),
            e = !1;
        try {
            (e = !!A.canPlayType) && (e = new Boolean(e), e.ogg = A.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ""), e.mp3 = A.canPlayType('audio/mpeg; codecs="mp3"').replace(/^no$/, ""), e.opus = A.canPlayType('audio/ogg; codecs="opus"') || A.canPlayType('audio/webm; codecs="opus"').replace(/^no$/, ""), e.wav = A.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ""), e.m4a = (A.canPlayType("audio/x-m4a;") || A.canPlayType("audio/aac;")).replace(/^no$/, ""))
        } catch (t) {}
        return e
    })

Modernizr.addTest("video", function() {
        var A = createElement("video"),
            e = !1;
        try {
            (e = !!A.canPlayType) && (e = new Boolean(e), e.ogg = A.canPlayType('video/ogg; codecs="theora"').replace(/^no$/, ""), e.h264 = A.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/, ""), e.webm = A.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/, ""), e.vp9 = A.canPlayType('video/webm; codecs="vp9"').replace(/^no$/, ""), e.hls = A.canPlayType('application/x-mpegURL; codecs="avc1.42E01E"').replace(/^no$/, ""))
        } catch (t) {}
        return e
    })

Removing all calls to canPlayType fixes the problem.

[Carlos Garcia Campos]

Problem is not canPlayType, the thing is that if we claim to support audio/video other tests later (audiopreload and videoautoplay) load some media that is causing the bug. For some reason, adding a hidden media element to the document is making html element to have display: none

[Carlos Garcia Campos]

Ok, I know what's going on. The html tag contains the class "hidden". When a media element is loaded in the document, the media controls CSS is loaded and guess what? This is the first line of the GTK media controls css

.hidden {
    display: none !important;
}

So, html tag containing hidden class becomes display: none. I don't think this is a regression in WebKit, it's just that some websites have recently started to include this hidden class in the HTML tag. that's why I could reproduce with very old versions of WebKit, and why it only happens in the GTK+ port. 

Calvaris, is that really needed or even correct? Can we remove it or fix it?

[Carlos Garcia Campos]

I see we use that to show/hide the media control elements, I think we should rename it, or somehow limit it to media control elements only.

[Carlos Garcia Campos]

Created attachment 314017 [details]
Patch

Please, tests it, because I don't know CSS and I don't know if I have forgotten any media control element. I've only tested it with https://www.w3.org/2010/05/video/mediaevents.html and it works.

[Xabier Rodríguez Calvar]

Comment on attachment 314017 [details]
Patch

Nit: I noticed that this is loaded in RenderThemeGtk::extraMediaControlsStyleSheet instead of RenderThemeGtk::mediaControlsStyleSheet, but this could be for another bug.

[Carlos Garcia Campos]

Committed r218878: <http://trac.webkit.org/changeset/218878>

[Dan Jacobson]

For me in Bug 174287 I'm seeing that sites don't open on computers with less memory. Both
https://people.igalia.com/clopez/wkbug/173768/midori/m1.html
https://people.igalia.com/clopez/wkbug/173768/midori/m2.html
opened fine, using the versions I noted there in Bug 174287.