CODEWITHSUNDEEP
htmlcss
TonyTakeshi
TonyTakeshi

Reputation: 5929

Is this a -webkit-box-reflect bug

While I developing a div image box with reflection -webkit-box-reflect, I found out that the reflection at bottom not mirroring exactly from the bottom of the image. It depends on how much size available for the reflection.

For better illustration of the problem:

http://jsfiddle.net/mochatony/4B26Q/14/

The 2 images have the different reflection, one from the middle and one from bottom of the image, which I expect reflection is from the bottom. The reflection is somehow depends on how much html height available, it the space allow for full shadow display, it will reflect the image at the bottom (you can adjust the slider of the html panel to adjust the size).

Is there a way to fix the reflection start from the bottom of the image regardless of space available?

Upvotes: 0

Views: 486

Answers (1)

Priya Sunanthan
Priya Sunanthan

Reputation: 439

Try the same code by removing width and height in box1 and box2 as follows:

#box1{
position:fixed;
margin-left:20%;
margin-top:0%;
-webkit-box-reflect: below;
}

Upvotes: 2

Related Questions