fix(viewer): Unexpected scrollbar appears when loading W3C documents

W3C documents such as https://www.w3.org/TR/wpub/ has a JavaScript script that inserts an element (`<p id="toc-nav">…</p>`) as the first element in the body element, and that caused this problem.
vivliostyle · Jul 18, 2023 · e96f6f0 · e96f6f0
1 parent 5e092c4
commit e96f6f0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/viewer/src/html/vivliostyle-viewer.ejs b/packages/viewer/src/html/vivliostyle-viewer.ejs
@@ -99,10 +99,10 @@
     <div id="vivliostyle-loading-overlay" hidden data-bind="visible: !isDebug, attr: {hidden: !viewer.state.status()?'':false}">
       <div class="vivliostyle-loading-spinner"></div>
     </div>
-    <div id="vivliostyle-text-selection-start-button" data-bind="visible: marksMenuStatus.startButtonOpened, clickOutside: marksMenuStatus.closeStartButton">
+    <div id="vivliostyle-text-selection-start-button" hidden data-bind="visible: marksMenuStatus.startButtonOpened, clickOutside: marksMenuStatus.closeStartButton, attr: {hidden: !marksMenuStatus.startButtonOpened()?'':false}">
       <button id="viv-marker-start-marker" data-bind="text: t('Highlight_')"></button>
     </div>
-    <div role="dialog" id="vivliostyle-text-selection-edit-menu" data-bind="visible: marksMenuStatus.menuOpened, clickOutside: marksMenuStatus.applyEditing">
+    <div role="dialog" id="vivliostyle-text-selection-edit-menu" hidden data-bind="visible: marksMenuStatus.menuOpened, clickOutside: marksMenuStatus.applyEditing, attr: {hidden: !marksMenuStatus.menuOpened()?'':false}">
       <div>
         <button class="viv-marker-color yellow" data-bind="attr: {title: t('Marker_Yellow')}, css: {'selected-color': marksMenuStatus.currentEditingColor() == 'yellow' }, click: () => { marksMenuStatus.currentEditingColor('yellow') }"></button>
         <button class="viv-marker-color red" data-bind="attr: {title: t('Marker_Red')}, css: { 'selected-color': marksMenuStatus.currentEditingColor() == 'red' }, click: () => { marksMenuStatus.currentEditingColor('red') }"></button>

diff --git a/packages/viewer/src/scss/ui.menu-bar.scss b/packages/viewer/src/scss/ui.menu-bar.scss
@@ -718,6 +718,11 @@
     /* stylelint-disable-next-line */
     height: calc(100dvh - #{$menu-icon-height + $page-slider-height});
     width: 100vw;
+
+    #vivliostyle-welcome[hidden] + & {
+      position: absolute;
+      inset: 0;
+    }
   }
 }