WebKit Bugzilla
Attachment 368979 Details for
Bug 197565
: Don't use inclusive layers with more complex compositing scenarios
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Example with z-index: -1
relative-in-scroller-in-hidden-with-sibling.html (text/html), 1.56 KB, created by
Simon Fraser (smfr)
on 2019-05-03 13:49:31 PDT
(
hide
)
Description:
Example with z-index: -1
Filename:
MIME Type:
Creator:
Simon Fraser (smfr)
Created:
2019-05-03 13:49:31 PDT
Size:
1.56 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> > <style> > .carousel { > width: 500px; > height: 300px; > border: 1px solid black; > margin: 20px; > overflow-y: hidden; > padding: 10px; > } > > .scroller { > overflow-x: auto; > width: 100%; > height: 100%; > border: 12px solid green; > box-sizing: border-box; > } > > .clipping { > overflow: hidden; > width: 200px; > border: 2px solid black; > margin: 50px 10px; > } > > .relative { > position: relative; > padding: 10px; > margin: 20px; > border: 2px solid blue; > background-color: orange; > z-index: -1; > } > > .absolute { > position: absolute; > top: 100px; > left: 200px; > margin: 10px; > width: 100px; > height: 100px; > background-color: blue; > box-shadow: 0 0 10px black; > } > > > .spacer { > height: 300px; > } > </style> ></head> ><body> > <p>You should see the orange box</p> > <div class="carousel"> > <div class="scroller"> > <div class="relative"> > Some text here > </div> > <div class="spacer"></div> > </div> > </div> > <div class="absolute"> > </div> ></body> ></html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> .carousel { width: 500px; height: 300px; border: 1px solid black; margin: 20px; overflow-y: hidden; padding: 10px; } .scroller { overflow-x: auto; width: 100%; height: 100%; border: 12px solid green; box-sizing: border-box; } .clipping { overflow: hidden; width: 200px; border: 2px solid black; margin: 50px 10px; } .relative { position: relative; padding: 10px; margin: 20px; border: 2px solid blue; background-color: orange; z-index: -1; } .absolute { position: absolute; top: 100px; left: 200px; margin: 10px; width: 100px; height: 100px; background-color: blue; box-shadow: 0 0 10px black; } .spacer { height: 300px; } </style> </head> <body> <p>You should see the orange box</p> <div class="carousel"> <div class="scroller"> <div class="relative"> Some text here </div> <div class="spacer"></div> </div> </div> <div class="absolute"> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 197565
: 368979