diff --git a/src/osx/webview_webkit.mm b/src/osx/webview_webkit.mm
index 25fae95fa8..64b67381ab 100644
--- a/src/osx/webview_webkit.mm
+++ b/src/osx/webview_webkit.mm
@@ -169,6 +169,26 @@ bool wxWebViewWebKit::Create(wxWindow *parent,
     // Implement javascript fullscreen interface with user script and message handler
     AddUserScript("\
         document.__wxToggleFullscreen = function (elem) { \
+            if (!document.__wxStylesAdded) { \
+                function createClass(name,rules) { \
+                    var style= document.createElement('style'); style.type = 'text/css'; \
+                    document.getElementsByTagName('head')[0].appendChild(style); \
+                    style.sheet.addRule(name, rules); \
+                } \
+                createClass(\"body.wxfullscreen\", \"padding: 0; margin: 0; height: 100%;\"); \
+                createClass(\".wxfullscreen\", \"position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0;\"); \
+                createClass(\".wxfullscreenelem\", \"width: 100% !important; height: 100% !important; padding-top: 0 !important;\"); \
+                document.__wxStylesAdded = true; \
+            } \
+            if (elem) { \
+                elem.classList.add(\"wxfullscreen\"); \
+                elem.classList.add(\"wxfullscreenelem\"); \
+                document.body.classList.add(\"wxfullscreen\"); \
+            } else if (document.webkitFullscreenElement) { \
+                document.webkitFullscreenElement.classList.remove(\"wxfullscreen\"); \
+                document.webkitFullscreenElement.classList.remove(\"wxfullscreenelem\"); \
+                document.body.classList.remove(\"wxfullscreen\"); \
+            } \
             document.webkitFullscreenElement = elem; \
             window.webkit.messageHandlers.__wxfullscreen.postMessage((elem) ? 1: 0); \
             document.dispatchEvent(new Event('webkitfullscreenchange')); \