Jump to content
Riverleaf

Tryit Editor bug

Recommended Posts

CSS locks scroll on Tryit Editor!

From https://www.w3schools.com/css/css3_backgrounds.asp to https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_multiple

When a shorthand url(img_tree.gif) is added to the mix with attachment property fixed value, or when existing longhand adds url(img_tree.gif), then the mouse-wheel scroll locks, cannot scroll. Side scroll-bar can be dragged to scroll. Oddly, sometimes scroll-bar use will unlock, sometimes refresh page and paste 'locked' code will unlock. Some setting is 'teettering-on-the-edge'!

Tryit Editor bug. No files to submit. Reproduceable.

My mach is MacPro late 2016 with 10.12.4 and Apple wired keyboard and Apple Wireless Mouse same date using Safari 10.1 (12603.1.30.0.34). Error reproduced twice: shorthand/longhand mix and all longhand with bug condition being addition of third image.

Edited by Riverleaf
add css value causing issue and boldify

Share this post


Link to post
Share on other sites

<!DOCTYPE html>
<html>
<head>
<style>

/*

.example1 { background: url(img_tree.gif), no-repeat, fixed, right top;

}

*/ /* and/or */
#example1 {
    background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
    background-position: right top, left bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: fixed, scroll, scroll;
    padding: 50vmin;
}
</style>
</head>
<body>

<div id="example1"><!--div class="example1" id="example1"-->
<h1>Lorem Ipsum Dolor</h1>
<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Repetitatum pel delorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Edited by Riverleaf
Add second condition (commented)

Share this post


Link to post
Share on other sites

Have you tried the same code in another environment to see if it's just an issue with the browser itself?

Generally the mouse wheel doesn't scroll something unless it's focused, so you have to click on the region before scrolling it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×