-
-
Notifications
You must be signed in to change notification settings - Fork 79k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WebKit CSS3 carousel transforms for supported devices #13074
Conversation
Could you please also include the resulting |
@cvrebert Sure. The Travis CI failure is due to stating webkit properties without using mixins. Fixing that now. |
left: 0; | ||
} | ||
&.next.left, &.prev.right, &.active { | ||
.translate3d(0%, 0, 0); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be just 0
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah it should, sorry about that. Converted all the values to percentages and the linter didn't pick up on it. I'll fix this up. I wonder if it can be removed completely...?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think CSSLint checks for that at all.
You mean remove the property completely? That I don't know, one would need to make sure it's not overwritten from somewhere else...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Turns out it is being overwritten somewhere else. Didn't work too well, so I just removed the percentage sign and committed.
@@ -230,3 +230,26 @@ | |||
bottom: 20px; | |||
} | |||
} | |||
|
|||
// WebKit CSS3 transforms for supported devices | |||
@media all and (-webkit-transform-3d) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we'd want to move the media query inside the .carousel
block so as to improve mixin-ability.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. Moved the media query into the .item
class instead as I wasn't modifying the .carousel
class.
What about Firefox? |
@mdo Yeah I had a look into Firefox compatibility but I couldn't find any good documentation on Perhaps it's possible to do something like this (source):
But really I have no idea if this works. Any suggestions? Also sorry for the delay, just finished uni exams. |
Do we really need to put this stuff under a media query? We don't do that with our other translate3d usages. |
Regarding Firefox, it seems it supports the unprefixed |
@cvrebert As in, rewriting the carousel to purely use CSS3 transitions or just stating the CSS3 rules and letting browsers ignore them at will? First one wouldn't be too good for older browsers, second sounds like it would try animating with two methods at once. @XhmikosR Added a media query for Firefox and tested it out, seems to work pretty well. Only a small noticeable change in quality though. |
@haydenbleasel The latter, but for that matter most of the other animations use CSS3, so.. But anyway, thanks for answering my naive question. |
@cvrebert I've never seen any examples where they're mixed together but I can look into it! |
@haydenbleasel No need to go on any wild goose chases on my account. :-) |
.transition-transform(~'0.6s ease-in-out'); | ||
.backface-visibility(~'hidden'); | ||
.perspective(1000); | ||
&.next, &.active.right { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a line break above this line, and break the selectors onto separate lines.
Sorry @mdo, formatting should be fixed now. |
👍 |
Did we need to do any more digging into things here? I'd love to see this make it into v3.2.1 if we can test it out thoroughly enough and vet the separate-mixed comments from @cvrebert. |
Yeah, those look a lot smoother. |
Apologies for the delays—is this all ready to rock? |
No worries homie, I believe it is unless anyone has edge cases or something they'd like to explore.— On Sun, Aug 3, 2014 at 7:29 AM, Mark Otto [email protected]
|
WebKit CSS3 carousel transforms for supported devices
Follow-up to #13074: use spec syntax instead of deprecated mixins
WebKit CSS3 carousel transforms for supported devices
I also came across at the poor performance of Bootstrap carousel, far away from being smooth as possible on desktops. So my quick and best working solution was to force hardware acceleration on all nodes of the carousel, because only in this any long painting was gone. Maybe it's not the best solution, but it works:
Maybe adding will-change properties will help too. |
This issue was originally introduced 2 years ago in issue #1966 but was dismissed by @mdo, stating:
As @petewarden explained:
I believe it's time to reconsider this implementation as it suits Bootstrap 3's mobile-first approach. The effects of implementing CSS3 transforms are significant on all WebKit devices I've tested, especially when using high-res images or multiple carousels (due to the large repaint times). For a full description of this issue including technical info and research, check out this Medium article.
I was going to comment on the previous issue but I rewrote the code to explicitly use 3D transforms to ensure hardware acceleration is enabled and some other helpful properties for visual integrity.