New issue
Advanced search Search tips

Issue 897220 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

-webkit-box-reflect is broken with enabled hardware acceleration

Reported by tobiasuh...@gmail.com, Oct 19

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36

Steps to reproduce the problem:
1. transform: translate3d(...);
2. -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(0, 0, 0, 0.3)));
3. 

What is the expected behavior?
the reflections render fine without GPU acceleration or in Safari.

in general it would be very nice if you could add box-reflect without the webkit prefix.

What went wrong?
See the screenshots.

I am working on a web worker driven UI framework (not public yet), but can add you to the repo in case you need a real testcase.

Did this work before? Yes ugh, might be 3 years ago, not entirely sure.

Chrome version: 70.0.3538.67  Channel: stable
OS Version: OS X 10.13.6
Flash Version:
 
box-reflect-chrome.png
542 KB View Download
box-reflect-safari.png
862 KB View Download
Labels: Needs-Triage-M70
Cc: vamshi.kommuri@chromium.org
Labels: Triaged-ET Needs-Feedback
Thanks for filing the issue!

@Reporter: Could you please share a sample test file/URL, which helps us to triage this further in a better way. Any further inputs from your end may be helpful. 
sure.

this is just a static snapshot of the gallery.
in case you want to see the full example, i can add you to the repository.

some observations: 
the clipped / cut off area for the bottom row is not random. in case you set the perspective for the origin view div to 0px, those are the visible items.

for a workaround ui-fix, we moved the box-reflect style from the image wrapper divs to the images itself and applied transform-style: flat.

(i just quickly manually reverted this change, so there is a transform-style: flat on the wrapper now (does not make a difference though).

best regards
tobias
897220.zip
36.7 KB Download
Project Member

Comment 4 by sheriffbot@chromium.org, Oct 22

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Type-Bug-Regression Target-72 M-72 FoundIn-71 FoundIn-70 FoundIn-72 OS-Linux OS-Windows Type-Bug
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Win-10, mac 10.13.3 and Ubuntu 17.10 using chrome stable #70.0.3538.67 and latest canary #72.0.3588.0 . 
This is a non-regression issue as it is observed from M60 old builds. 
Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!
Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)
Components: -Blink Blink>Compositing

Sign in to add a comment