From a1171d71fb66b19f7d9fcadaf9533ac190250870 Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Tue, 15 Oct 2019 18:40:11 +0530 Subject: [PATCH] Better solution to avoid flash of unstyled text Simply hide the iframe while loading --- src/pyj/read_book/iframe.pyj | 6 +++--- src/pyj/read_book/resources.pyj | 10 ++++------ src/pyj/read_book/view.pyj | 30 +++++++++++++++++------------- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/pyj/read_book/iframe.pyj b/src/pyj/read_book/iframe.pyj index 84b291060e..a7af8b717c 100644 --- a/src/pyj/read_book/iframe.pyj +++ b/src/pyj/read_book/iframe.pyj @@ -262,15 +262,15 @@ class IframeBoss: self.do_layout(self.is_titlepage) if self.mathjax: return apply_mathjax(self.mathjax, self.book.manifest.link_uid, self.content_loaded_stage2) + # window.setTimeout(self.content_loaded_stage2, 1000) self.content_loaded_stage2() def content_loaded_stage2(self): self.connect_links() self.content_ready = True # this is the loading styles used to suppress scrollbars during load - # added in unserialize_html and the overlay to hide flash of unstyled - # text - document.body.removeChild(document.body.firstChild) + # added in unserialize_html + document.head.removeChild(document.head.firstChild) csi = current_spine_item() if csi.initial_position: diff --git a/src/pyj/read_book/resources.pyj b/src/pyj/read_book/resources.pyj index 4a47ce5bae..53042197db 100644 --- a/src/pyj/read_book/resources.pyj +++ b/src/pyj/read_book/resources.pyj @@ -236,13 +236,11 @@ def unserialize_html(serialized_data, proceed, postprocess_dom): head, body = tree[1], tree[2] # noqa: unused-local clear(document.head, document.body) remove_all_attributes(document.head, document.body) - # prevent flash of unstyled text during loading, showing - # a blank background instead - document.body.appendChild(E.div( - '\xa0', - style=f'position: absolute; z-index: 2147483647; width: 10000vw; height: 10000vh; background-color: {opts.color_scheme.background}', + # hide browser scrollbars while loading since they will anyway be hidden + # after loading and this prevents extra layouts + document.head.appendChild( E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }') - )) + ) # Default stylesheet if not runtime.is_standalone_viewer: # for the standalone viewer the default font family is set diff --git a/src/pyj/read_book/view.pyj b/src/pyj/read_book/view.pyj index 7869bc1424..84ec752374 100644 --- a/src/pyj/read_book/view.pyj +++ b/src/pyj/read_book/view.pyj @@ -499,27 +499,28 @@ class View: s.color = ans.foreground s.backgroundColor = ans.background sd = get_session_data() - self.iframe.style.backgroundColor = ans.background or 'white' + iframe = self.iframe + iframe.style.backgroundColor = ans.background or 'white' bg_image = sd.get('background_image') if bg_image: - self.iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL}?{Date().getTime()})' if runtime.is_standalone_viewer else f'url({bg_image})' + iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL}?{Date().getTime()})' if runtime.is_standalone_viewer else f'url({bg_image})' else: - self.iframe.style.backgroundImage = 'none' + iframe.style.backgroundImage = 'none' if sd.get('background_image_style') is 'scaled': - self.iframe.style.backgroundSize = '100% 100%' - self.iframe.style.backgroundRepeat = 'no-repeat' - self.iframe.style.backgroundAttachment = 'scroll' - self.iframe.style.backgroundPosition = 'center' + iframe.style.backgroundSize = '100% 100%' + iframe.style.backgroundRepeat = 'no-repeat' + iframe.style.backgroundAttachment = 'scroll' + iframe.style.backgroundPosition = 'center' else: - self.iframe.style.backgroundSize = 'auto' - self.iframe.style.backgroundRepeat = 'repeat' - self.iframe.style.backgroundAttachment = 'scroll' - self.iframe.style.backgroundPosition = '0 0' + iframe.style.backgroundSize = 'auto' + iframe.style.backgroundRepeat = 'repeat' + iframe.style.backgroundAttachment = 'scroll' + iframe.style.backgroundPosition = '0 0' - m.parentNode.style.backgroundColor = ans.background # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through + iframe.parentNode.style.backgroundColor = ans.background # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through self.content_popup_overlay.apply_color_scheme(ans.background, ans.foreground) self.book_scrollbar.apply_color_scheme(ans) - self.iframe.parentNode.parentNode.style.backgroundColor = ans.background + iframe.parentNode.parentNode.style.backgroundColor = ans.background return ans def on_resize(self): @@ -541,7 +542,9 @@ class View: if self.show_loading_callback_timer is not None: clearTimeout(self.show_loading_callback_timer) self.show_loading_callback_timer = None + self.iframe.style.visibility = 'visible' self.overlay.hide_loading_message() + self.focus_iframe() def parse_cfi(self, encoded_cfi, book): name = cfi = None @@ -881,6 +884,7 @@ class View: # We cannot encrypt this message because the resource data contains # Blob objects which do not survive encryption self.processing_spine_item_display = True + self.iframe.style.visibility = 'hidden' self.iframe_wrapper.send_unencrypted_message('display', resource_data=resource_data, book=self.book, name=self.currently_showing.name, initial_position=self.currently_showing.initial_position,