Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #14937
Closed
Open
Issue created Oct 30, 2014 by Administrator@rootContributor

Carousel code partially doesn't use vendor-prefixes mixins

Created by: komor72

https://github.com/twbs/bootstrap/blob/master/less/carousel.less#L30 and also in Sass variant: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_carousel.scss#L30

The @media code from line 30 to 47 doesn't use vendor-prefixes mixin names but plain CSS attributes without prefix variants. This breaks Carousel transitions on my Safari 6.1 on OS X 10.7, in my code using Middleman and Bootstrap-Sass. After googling I'm pretty convinced I'm not the only victim. Curiously, the Carousel example from project's homepage works OK and CSS inspection shows me all vendor-specific declarations.

I've fixed this in my local gem copy, and now it works in my project. Sorry for Sass code instead of Less, but I work on Sass and verified my change on Sass version only:

    // WebKit CSS3 transforms for supported devices
    @media all and (transform-3d), (-webkit-transform-3d) {
      @include transition-transform (.6s ease-in-out);
      @include backface-visibility (hidden);
      @include perspective (1000);

      &.next,
      &.active.right {
        @include translate3d (100%, 0, 0);
        left: 0;
      }
      &.prev,
      &.active.left {
        @include translate3d(-100%, 0, 0);
        left: 0;
      }
      &.next.left,
      &.prev.right,
      &.active {
        @include translate3d(0, 0, 0);
        left: 0;
      }
    }
Assignee
Assign to
Time tracking