From a78f9ab68865bfc67d953c0d8c794f634f3adacc Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Wed, 7 Mar 2018 13:00:03 +0200
Subject: [PATCH] fix: fix right-panel blinking when scrolling + css
 improvements

---
 src/components/ApiLogo/styled.elements.ts         |  2 +-
 src/components/Operation/Operation.tsx            |  4 +++-
 src/components/Redoc/Redoc.tsx                    |  3 ++-
 src/components/Redoc/elements.tsx                 | 15 ++++++++++++++-
 src/components/SearchBox/SearchBox.tsx            |  6 +++---
 src/components/SearchBox/elements.tsx             |  4 ++++
 .../StickySidebar/StickyResponsiveSidebar.tsx     |  3 ++-
 src/services/MarkdownRenderer.ts                  |  4 +++-
 8 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/ApiLogo/styled.elements.ts b/src/components/ApiLogo/styled.elements.ts
index 3d1099ec..c9ee98df 100644
--- a/src/components/ApiLogo/styled.elements.ts
+++ b/src/components/ApiLogo/styled.elements.ts
@@ -3,7 +3,7 @@ import styled from '../../styled-components';
 export const LogoImgEl = styled.img`
   max-height: ${props => props.theme.logo.maxHeight};
   width: auto;
-  display: inline-block;
+  display: block;
   max-width: 100%;
 `;
 
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 8db73f39..818b9034 100644
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@@ -19,7 +19,9 @@ import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
 import { OperationModel as OperationType } from '../../services/models';
 
 const OperationRow = styled(Row)`
-  transform: translateZ(0);
+  backface-visibility: hidden;
+  contain: content;
+
   overflow: hidden;
   position: relative;
 
diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx
index 547a8121..e0b03df4 100644
--- a/src/components/Redoc/Redoc.tsx
+++ b/src/components/Redoc/Redoc.tsx
@@ -10,7 +10,7 @@ import { ContentItems } from '../ContentItems/ContentItems';
 import { OptionsProvider } from '../OptionsProvider';
 import { SideMenu } from '../SideMenu/SideMenu';
 import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar';
-import { ApiContent, RedocWrap } from './elements';
+import { ApiContent, RedocWrap, BackgroundStub } from './elements';
 
 import { SearchBox } from '../SearchBox/SearchBox';
 
@@ -52,6 +52,7 @@ export class Redoc extends React.Component<RedocProps> {
               <ApiInfo store={store} />
               <ContentItems items={menu.items as any} />
             </ApiContent>
+            <BackgroundStub />
           </RedocWrap>
         </OptionsProvider>
       </ThemeProvider>
diff --git a/src/components/Redoc/elements.tsx b/src/components/Redoc/elements.tsx
index c21d81f4..3c1091c6 100644
--- a/src/components/Redoc/elements.tsx
+++ b/src/components/Redoc/elements.tsx
@@ -35,11 +35,24 @@ export const RedocWrap = styled.div`
 `;
 
 export const ApiContent = styled.div`
-  z-index: 10;
+  z-index: 1;
   position: relative;
   overflow: hidden;
   width: calc(100% - ${props => props.theme.menu.width});
   ${media.lessThan('small')`
     width: 100%;
   `};
+  contain: layout;
+`;
+
+export const BackgroundStub = styled.div`
+  background: ${props => props.theme.rightPanel.backgroundColor};
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: calc((100% - ${props => props.theme.menu.width}) * 0.4);
+  ${media.lessThan('medium')`
+    display: none;
+  `};
 `;
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index cebbdb5e..01257940 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -7,7 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
 import { MarkerService } from '../../services/MarkerService';
 import { SearchDocument } from '../../services/SearchWorker.worker';
 
-import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox } from './elements';
+import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox, SearchWrap } from './elements';
 
 export interface SearchBoxProps {
   search: SearchStore;
@@ -92,7 +92,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
     results.sort((a, b) => b.score - a.score);
 
     return (
-      <div>
+      <SearchWrap>
         {this.state.term && <ClearIcon onClick={this.clear}>×</ClearIcon>}
         <SearchIcon />
         <SearchInput
@@ -114,7 +114,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
             ))}
           </SearchResultsBox>
         )}
-      </div>
+      </SearchWrap>
     );
   }
 }
diff --git a/src/components/SearchBox/elements.tsx b/src/components/SearchBox/elements.tsx
index 7f28722d..860bc639 100644
--- a/src/components/SearchBox/elements.tsx
+++ b/src/components/SearchBox/elements.tsx
@@ -2,6 +2,10 @@ import * as React from 'react';
 import styled from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
+export const SearchWrap = styled.div`
+  padding: 5px 0;
+`;
+
 export const SearchInput = styled.input.attrs({
   className: 'search-input',
 })`
diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
index 7383ca43..fca03115 100644
--- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx
+++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
@@ -27,7 +27,8 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)`
   display: flex;
   flex-direction: column;
 
-  transform: translateZ(0);
+  backface-visibility: hidden;
+  contain: strict;
 
   height: 100vh;
   position: sticky;
diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts
index 4154b4d7..b651a14b 100644
--- a/src/services/MarkdownRenderer.ts
+++ b/src/services/MarkdownRenderer.ts
@@ -35,7 +35,9 @@ export class MarkdownRenderer {
 
   constructor() {
     this.headingEnhanceRenderer = new marked.Renderer();
-    this.originalHeadingRule = this.headingEnhanceRenderer.heading;
+    this.originalHeadingRule = this.headingEnhanceRenderer.heading.bind(
+      this.headingEnhanceRenderer,
+    );
     this.headingEnhanceRenderer.heading = this.headingRule;
   }