Riverleaf Posted April 21, 2017 Share Posted April 21, 2017 (edited) 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 April 21, 2017 by Riverleaf add css value causing issue and boldify Link to comment Share on other sites More sharing options...
Riverleaf Posted April 21, 2017 Author Share Posted April 21, 2017 (edited) <!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 April 21, 2017 by Riverleaf Add second condition (commented) Link to comment Share on other sites More sharing options...
Ingolme Posted April 21, 2017 Share Posted April 21, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now