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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...