From d0efc9a9072ca731a6bfabcc52bc44aaae2f53da Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 23 Jan 2019 17:03:23 -0500
Subject: [PATCH] Add container with overflow hidden to prevent scrollbars from
playhead
---
src/components/audio-trimmer/audio-trimmer.css | 9 +++++++++
src/components/audio-trimmer/audio-trimmer.jsx | 14 ++++++++------
2 files changed, 17 insertions(+), 6 deletions(-)
diff --git a/src/components/audio-trimmer/audio-trimmer.css b/src/components/audio-trimmer/audio-trimmer.css
index 3d9fa65a1..63af2a0cb 100644
--- a/src/components/audio-trimmer/audio-trimmer.css
+++ b/src/components/audio-trimmer/audio-trimmer.css
@@ -53,6 +53,15 @@ $hover-scale: 2;
border: 1px solid $red-tertiary;
}
+.playhead-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
.playhead {
/*
Even though playhead is just a line, it is 100% width (the width of the waveform)
diff --git a/src/components/audio-trimmer/audio-trimmer.jsx b/src/components/audio-trimmer/audio-trimmer.jsx
index e2ad295fc..87ca75a98 100644
--- a/src/components/audio-trimmer/audio-trimmer.jsx
+++ b/src/components/audio-trimmer/audio-trimmer.jsx
@@ -32,12 +32,14 @@ const AudioTrimmer = props => (
)}
{props.playhead ? (
- <Box
- className={classNames(styles.trimLine, styles.playhead)}
- style={{
- transform: `translateX(${100 * props.playhead}%)`
- }}
- />
+ <div className={styles.playheadContainer}>
+ <div
+ className={classNames(styles.trimLine, styles.playhead)}
+ style={{
+ transform: `translateX(${100 * props.playhead}%)`
+ }}
+ />
+ </div>
) : null}
{props.trimEnd === null ? null : (
--
GitLab