CSS绝对位置动画，溢出隐藏

我有一个ID为的动画div shooting star：

我的html：

<div id="sky">
    <span id="shootingstar"></span>
    <div id="allstars"></div>
</div>

.shootingstar {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    transform-origin: 100% 0;
    animation-iteration-count: 1;
    opacity: 0;
}


.shootingstar-animation-right {
    animation: shootingstar-right-down ease-out;
}


.shootingstar-animation-left {
    animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 2px, 0);
    transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
    content: '';
    position: absolute;
    border: 2px solid #f00;
    border-width: 2px 150px 2px 150px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-135deg) translate3d(1px, 5px, 0);
    transform-origin: 0% 100%;
}


@-webkit-keyframes shootingstar-right-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
    }
}


@-webkit-keyframes shootingstar-left-down {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
    }
}

使用我的js文件，我克隆teh元素并随机设定顶部和宽度以在天空中具有多个流星：

var sky = document.getElementById('sky')

function createShootingStar () {
        var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000
        var finalTime = time.toFixed(2)
        var random = Math.round(Math.random())

        var tx = Math.floor(Math.random() * finalW)
        var ty = Math.random() * (finalH * 0.25 - 0) + 0

        var element = document.getElementById('shootingstar')
        var cln = element.cloneNode(true)
        cln.classList.add('shootingstar')
        random == 1
          ? cln.classList.add('shootingstar-animation-right')
          : cln.classList.add('shootingstar-animation-left')
        cln.style.animationDuration = finalTime + 's'
        cln.style.right = tx + 'px'
        cln.style.top = ty  + 'px'
        sky.appendChild(cln)
        setTimeout(function () {
          sky.removeChild(cln)
        }, 3000)
}

setInterval(createShootingStar, 1000)

问题是，有时我的流星会在溢出中开始或结束（这就是我想要的），但是水平滚动条会激活，我想防止这种情况发生。

我想隐藏所有不在屏幕上的星星，但是这些星星overflow: hidden;不起作用。

编辑：这发生在移动尺寸