WebKit Bugzilla
Attachment 373005 Details for
Bug 199260
: Rotated composited elements with clipping descendants sometimes don't respecting original layering
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Minimal reproduction case
transform-in-rotated-object-bug.html (text/html), 836 bytes, created by
iztok.oder
on 2019-06-27 00:25:29 PDT
(
hide
)
Description:
Minimal reproduction case
Filename:
MIME Type:
Creator:
iztok.oder
Created:
2019-06-27 00:25:29 PDT
Size:
836 bytes
patch
obsolete
> ><head> ><style type="text/css"> > .object { > width: 200px; > height: 200px; > transform: rotate(93deg); > } > .container { > position: relative; > width: 100%; > height: 100%; > overflow: hidden; > } > > .element-1 { > position: absolute; > top: 50px; > left: 50px; > width: 50px; > height: 50px; > background-color: red; > z-index: 1; > } > > .element-2 { > position: absolute; > top: -5px; > left: -5px; > width: 210px; > height: 210px; > background-color: green; > transform: translateZ(0); > z-index: 0; > } > ></style> ></head> ><body> > ><div class="object"> > <div class="container"> > <div class="element-1"></div> > <div class="element-2"></div> > </div> ></div> > ></body>
<head> <style type="text/css"> .object { width: 200px; height: 200px; transform: rotate(93deg); } .container { position: relative; width: 100%; height: 100%; overflow: hidden; } .element-1 { position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: red; z-index: 1; } .element-2 { position: absolute; top: -5px; left: -5px; width: 210px; height: 210px; background-color: green; transform: translateZ(0); z-index: 0; } </style> </head> <body> <div class="object"> <div class="container"> <div class="element-1"></div> <div class="element-2"></div> </div> </div> </body>
View Attachment As Raw
Actions:
View
Attachments on
bug 199260
:
373005
|
373037
|
373049
|
373052