[GTK] Some web pages disappear immediately after rendering
authorcarlosgc@webkit.org <carlosgc@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 Jun 2017 16:32:49 +0000 (16:32 +0000)
committercarlosgc@webkit.org <carlosgc@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 Jun 2017 16:32:49 +0000 (16:32 +0000)
https://bugs.webkit.org/show_bug.cgi?id=173768

Reviewed by Xabier Rodriguez-Calvar.

This is happening with websites having a "hidden" class in HTML tag when a media element is added. In the GTK+
port the media controls CSS contains the following code:

.hidden {
    display: none !important;
}

That causes the whole HTML document to become display: none. That's why we just render a white page, and also
the reason why it only happens with the GTK+ port and only with some specific websites. We should limit the
scope of the hidden class to the media control elements.

* css/mediaControlsGtk.css:
(audio::-webkit-media-controls-panel.hidden,):
(audio::-webkit-media-controls-panel div.mute-box.hidden,):
(audio::-webkit-media-controls-current-time-display.hidden,):
(audio::-webkit-media-controls-timeline.hidden,):
(audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):
(audio::-webkit-media-controls-toggle-closed-captions-button.hidden,):
(video::-webkit-media-controls-closed-captions-container.hidden):
(audio::-webkit-media-controls-fullscreen-button.hidden,):
(.hidden): Deleted.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@218878 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/css/mediaControlsGtk.css

index 1d0d97d..88f47e7 100644 (file)
@@ -1,3 +1,32 @@
+2017-06-28  Carlos Garcia Campos  <cgarcia@igalia.com>
+
+        [GTK] Some web pages disappear immediately after rendering
+        https://bugs.webkit.org/show_bug.cgi?id=173768
+
+        Reviewed by Xabier Rodriguez-Calvar.
+
+        This is happening with websites having a "hidden" class in HTML tag when a media element is added. In the GTK+
+        port the media controls CSS contains the following code:
+
+        .hidden {
+            display: none !important;
+        }
+
+        That causes the whole HTML document to become display: none. That's why we just render a white page, and also
+        the reason why it only happens with the GTK+ port and only with some specific websites. We should limit the
+        scope of the hidden class to the media control elements.
+
+        * css/mediaControlsGtk.css:
+        (audio::-webkit-media-controls-panel.hidden,):
+        (audio::-webkit-media-controls-panel div.mute-box.hidden,):
+        (audio::-webkit-media-controls-current-time-display.hidden,):
+        (audio::-webkit-media-controls-timeline.hidden,):
+        (audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button):
+        (audio::-webkit-media-controls-toggle-closed-captions-button.hidden,):
+        (video::-webkit-media-controls-closed-captions-container.hidden):
+        (audio::-webkit-media-controls-fullscreen-button.hidden,):
+        (.hidden): Deleted.
+
 2017-06-28  Antoine Quint  <graouts@apple.com>
 
         Media controls volume glyph does not have the correct material
index 400d6d9..a688478 100644 (file)
 
 /* These are based on the Chromium media controls */
 
-.hidden {
-    display: none !important;
-}
-
 video::-webkit-media-controls-panel *:active,
 video::-webkit-media-controls-panel *:focus,
 audio::-webkit-media-controls-panel *:active,
@@ -43,6 +39,11 @@ audio::-webkit-media-controls-panel.down *:focus {
     background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important;
 }
 
+audio::-webkit-media-controls-panel.hidden,
+video::-webkit-media-controls-panel.hidden {
+    display: none !important;
+}
+
 body:-webkit-full-page-media {
     background-color: rgb(0, 0, 0);
 }
@@ -120,6 +121,11 @@ audio::-webkit-media-controls-panel div.mute-box {
     margin: 0 9px 0 -7px;
 }
 
+audio::-webkit-media-controls-panel div.mute-box.hidden,
+video::-webkit-media-controls-panel div.mute-box.hidden {
+    display: none !important;
+}
+
 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
     -webkit-appearance: media-mute-button;
     display: flex;
@@ -178,6 +184,13 @@ audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
     text-decoration: none;
 }
 
+audio::-webkit-media-controls-current-time-display.hidden,
+video::-webkit-media-controls-current-time-display.hidden,
+audio::-webkit-media-controls-time-remaining-display.hidden,
+video::-webkit-media-controls-time-remaining-display.hidden {
+    display: none !important;
+}
+
 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
     -webkit-appearance: media-slider !important;
     display: flex !important;
@@ -196,6 +209,11 @@ audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-
     opacity: 0.3 !important;
 }
 
+audio::-webkit-media-controls-timeline.hidden,
+video::-webkit-media-controls-timeline.hidden {
+    display: none !important;
+}
+
 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
     -webkit-appearance: media-volume-slider-container;
     display: flex;
@@ -297,6 +315,11 @@ audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
     outline: none;
 }
 
+audio::-webkit-media-controls-toggle-closed-captions-button.hidden,
+video::-webkit-media-controls-toggle-closed-captions-button.hidden {
+    display: none !important;
+}
+
 video::-webkit-media-controls-closed-captions-container {
     -webkit-appearance: media-closed-captions-container;
     display: flex;
@@ -322,6 +345,10 @@ video::-webkit-media-controls-closed-captions-container.out {
     border-radius: 5px;
 }
 
+video::-webkit-media-controls-closed-captions-container.hidden {
+    display: none !important;
+}
+
 video::-webkit-media-controls-closed-captions-container h3 {
     padding-top: 8px;
     margin: 0;
@@ -368,3 +395,8 @@ audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
     margin: 0 9px 0 -7px;
     outline: none;
 }
+
+audio::-webkit-media-controls-fullscreen-button.hidden,
+video::-webkit-media-controls-fullscreen-button.hidden {
+    display: none !important;
+}