fix: fix right-panel blinking when scrolling + css improvements

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%;
 `;
 

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;
 

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>

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;
+  `};
 `;

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>
     );
   }
 }

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',
 })`

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;

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;
   }