Some pixels are missing in Google Chrome for DIV {-webkit-backface-visibility: hidden;}

Question

Some pixels are missing in Google Chrome for DIV {-webkit-backface-visibility: hidden;}

Closed this issue 11 years ago · 5 comments

Please follow the following screenshot to reproduce this problem. The screenshot was taken on http://proloser.github.io/Flexbox.less/demo.html.

I reproduced this problem on both Windows 7 and Mac OS X.

Answer 1 · 2013-09-08T22:21:21.000Z

I have no idea what you're referring to, nor does it appear any browsers support backface-visibility yet.

Answer 2 · 2013-09-09T01:42:56.000Z

I reproduced this problem only in Google Chrome on both Windows 7 and Mac OS X.

backface-visibility has been supported by Google Chrome and other browsers. For more details please refer to this page, http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp.

This is what it should look like.

But when backface-visibility is set to hidden, some borders become 1px wide - just as the screenshot in my original post.

Answer 3 · 2013-09-09T13:03:46.000Z

Looking at the link you posted, it very clearly says "The backface-visibility property is not supported in any of the major browsers.". Personally, while I think we could introduce support for all kinds of crazy wacky rules that are only supported with browser prefixes, it seems somewhat a challenging task for little gain.

Can you tell me what you're trying to accomplish with backface visibility?

Answer 4 · 2013-09-09T17:21:37.000Z

It appears browsers do in fact support the prefix version. Regardless, the
bug you are describing is with webkit, not our code.
On Sep 8, 2013 6:42 PM, "Peter Fu" notifications@github.com wrote:

I reproduced this problem only in Google Chrome on both Windows 7 and Mac
OS X.

backface-visibility has been supported by Google Chrome and other
browsers. For more details please refer to this page,
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp.

This is what it should look like.
[image: qq20130909-2]https://f.cloud.github.com/assets/930535/1104289/a1ec0b5a-18f0-11e3-939b-091548dfed64.png

But when backface-visibility is set to hidden, some borders become 1px
wide - just as the screenshot in my original post.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/7#issuecomment-24034684
.

Answer 5 · 2013-09-09T18:26:05.000Z

Looking at the link you posted, it very clearly says "The backface-visibility property is not supported in any of the major browsers.".

No, backface-visibility itself is not supported by any of the major browsers - just like border-radius, developers have to use -moz-border-radius, -webkit-border-radius to make it work in various browsers.

In the screenshot of my original post, I used -webkit-backface-visibility because I was debugging against Google Chrome.

Personally, while I think we could introduce support for all kinds of crazy wacky rules that are only supported with browser prefixes, it seems somewhat a challenging task for little gain.

Agree. I can easily fix my problem by removing that single line -webkit-backface-visibility: hidden. I actually have done that, and I don't see any problem after I did that.

Can you tell me what you're trying to accomplish with backface visibility?

We are using FlatUI library, it defines a mixin .transition() here with -webkit-backface-visibility: hidden, and applied this mixin to all buttons. And I am trying to wrap a group of buttons in a flexbox.

It appears browsers do in fact support the prefix version. Regardless, the
bug you are describing is with webkit, not our code.

Thanks a lot for looking into this. I just reported an issue to Chromium about this.

It turns out flexbox can't be used together with -webkit-backface-visibility: hidden in Chrome when the flex boxes are in a parent container which is margin: 0 auto until Chrome fixes that.