Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

CSS issues with Brave #9332

Closed
c3x opened this issue Jun 8, 2017 · 3 comments
Closed

CSS issues with Brave #9332

c3x opened this issue Jun 8, 2017 · 3 comments
Labels
needs-info Another team member needs information from the PR/issue opener. webcompat

Comments

@c3x
Copy link

c3x commented Jun 8, 2017

I just install the latest version of Brave (0.15.314) and check an new website, I'm currently working on.

I found out, that my counter boxes are not shown with the Brave browser - all other browsers (Firefox, Chrome, Edge, Cliqz, Vivaldi, Opera, Opera Neon - all in the latest version) show my boxes without any problems.

My platform: Windows 10

Here the CSS code for the boxes:

.counter-widget {
  margin-bottom: 20px;
  -moz-box-shadow: 13px 13px 13px rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 13px 13px 13px rgba(0, 0, 0, 0.03);
  box-shadow: 13px 13px 13px rgba(0, 0, 0, 0.03);
}
.counter-widget.variant-1 {
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
.counter-widget.variant-1 .counter-icon {
  width: 100%;
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
}
.counter-widget.variant-1 .counter-icon .front-content i {
  font-size: 28px;
  color: #fff;
  font-weight: normal;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-right-radius: 100%;
  text-align: left;
}
.counter-widget.variant-1 .counter-icon .front-content i:before {
  position: relative;
  top: -5px;
  left: -4px;
}
.counter-widget.variant-1 .counter-icon .front-content .total {
  color: #fff;
  font-size: 35px;
  line-height: 1;
}
.counter-widget.variant-1 .counter-icon .front-content p {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0px;
  margin-bottom: 1px;
}
.counter-widget.variant-1 .counter-icon .front-content .progress {
  background: rgba(0, 0, 0, 0.08);
  margin-top: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.counter-widget.variant-1 .counter-icon .front-content .progress .progress-bar {
  background: rgba(0, 0, 0, 0.1) !important;
}
.counter-widget.variant-1 .counter-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  padding: 20px;
  text-align: center;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #fff;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -moz-transform: translateY(110px) rotateX(-90deg);
  -ms-transform: translateY(110px) rotateX(-90deg);
  -webkit-transform: translateY(110px) rotateX(-90deg);
  transform: translateY(110px) rotateX(-90deg);
}
.counter-widget.variant-1 .counter-content .btn {
  background: transparent;
}
.counter-widget.variant-1 .counter-content .btn.btn-bordered {
  border: 1px solid #fff;
  color: #fff;
}
.counter-widget.variant-1 .counter-content .btn.btn-bordered:hover, .counter-widget.variant-1 .counter-content .btn.btn-bordered:focus {
  background: #fff;
  color: #474747;
}
.counter-widget.variant-1 .counter-content .counter-status {
  padding-top: 13px;
  display: block;
}
.counter-widget.variant-1:hover .counter-icon {
  opacity: 0;
  -moz-transform: translateY(-110px) rotateX(90deg);
  -ms-transform: translateY(-110px) rotateX(90deg);
  -webkit-transform: translateY(-110px) rotateX(90deg);
  transform: translateY(-110px) rotateX(90deg);
}
.counter-widget.variant-1:hover .counter-content {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
@media screen and (min-width: 768px) {
  .counter-widget.variant-1 .counter-content {
    margin-top: -10px;
  }
  .counter-widget.variant-1 .counter-content .btn {
    margin-top: 7px;
  }
}
@media screen and (max-width: 399px) {
  .counter-widget.variant-1 .front-content {
    margin-top: 40px;
  }
  .counter-widget.variant-1 .front-content .total {
    font-size: 25px !important;
  }
  .counter-widget.variant-1 .counter-content > div {
    padding-top: 10px;
  }
  .counter-widget.variant-1 .counter-content > div > .btn {
    margin-top: 12px;
  }
  .counter-widget.variant-1 .counter-content > div .counter-status {
    padding-top: 18px;
    padding-bottom: 4px;
  }
}
@media screen and (max-width: 767px) {
  .counter-widget.variant-1 .counter-content .btn {
    display: block;
    margin: auto;
  }
  .counter-widget.variant-1 .counter-content .counter-status {
    padding-top: 6px;
  }
}
.counter-widget.variant-2 .counter-icon {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 80px;
}
@media screen and (min-width: 380px) {
  .counter-widget.variant-2 .counter-icon {
    width: 28.3%;
    float: left;
  }
}
.counter-widget.variant-2 .counter-icon > i.icon {
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
  text-align: center;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
}
.counter-widget.variant-2 .counter-content {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 80px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
@media screen and (min-width: 380px) {
  .counter-widget.variant-2 .counter-content {
    width: 71.7%;
    float: right;
  }
}
.counter-widget.variant-2 .counter-content > .total {
  color: #fff;
  text-align: left;
  font-size: 25px;
}
.counter-widget.variant-2 .counter-content > .caption {
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  line-height: 1;
  margin-top: -2px;
}
@media screen and (max-width: 379px) {
  .counter-widget.variant-2 .counter-content > .total,
  .counter-widget.variant-2 .counter-content > .caption {
    text-align: center;
  }
}
.counter-widget.variant-3 .counter-icon {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 80px;
}
.counter-widget.variant-3 .counter-icon > i.icon {
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
  text-align: center;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
}
.counter-widget.variant-3 .counter-content {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 80px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.counter-widget.variant-3 .counter-content > .total {
  color: #fff;
  text-align: left;
  font-size: 25px;
  text-align: center;
}
.counter-widget.variant-3 .counter-content > .caption {
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  line-height: 1;
  margin-top: -2px;
  text-align: center;
}
.counter-widget.variant-4 {
  padding: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.counter-widget.variant-4 .counter-icon {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 60px;
}
@media screen and (min-width: 380px) {
  .counter-widget.variant-4 .counter-icon {
    width: 28.3%;
    float: left;
  }
}
.counter-widget.variant-4 .counter-icon > i.icon {
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
  text-align: center;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
}
.counter-widget.variant-4 .counter-content {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 60px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 4px;
  padding-bottom: 15px;
}
@media screen and (min-width: 380px) {
  .counter-widget.variant-4 .counter-content {
    width: 71.7%;
    float: right;
  }
}
.counter-widget.variant-4 .counter-content > .total {
  color: #fff;
  text-align: left;
  font-size: 25px;
}
.counter-widget.variant-4 .counter-content > .caption {
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  line-height: 1;
  margin-top: -2px;
}
@media screen and (max-width: 379px) {
  .counter-widget.variant-4 .counter-content > .total,
  .counter-widget.variant-4 .counter-content > .caption {
    text-align: center;
  }
}

.plupload_container {
  padding: 0;
}

.counter-widget.variant-1.color-1, .counter-widget.variant-2.color-1, .counter-widget.variant-4.color-1 {
  background-color: #26C6DA;
  -moz-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(38, 198, 218, 0.4);
  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(38, 198, 218, 0.4);
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(38, 198, 218, 0.4);
}
.counter-widget.variant-1.color-2, .counter-widget.variant-2.color-2, .counter-widget.variant-4.color-2 {
  background-color: #dab326;
  -moz-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 179, 38, 0.4);
  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 179, 38, 0.4);
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 179, 38, 0.4);
}
.counter-widget.variant-1.color-3, .counter-widget.variant-2.color-3, .counter-widget.variant-4.color-3 {
  background-color: #da2677;
  -moz-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 38, 119, 0.4);
  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 38, 119, 0.4);
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(218, 38, 119, 0.4);
}
.counter-widget.variant-1.color-4, .counter-widget.variant-2.color-4, .counter-widget.variant-4.color-4 {
  background-color: #16b985;
  -moz-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(22, 185, 133, 0.4);
  -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(22, 185, 133, 0.4);
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(22, 185, 133, 0.4);
}

This is how it looks on Brave: https://pixr.co/image/BCk

Firefox: https://pixr.co/image/BCt
Chrome: https://pixr.co/image/BCJ
Cliqz: https://pixr.co/image/BCX
Vivaldi: https://pixr.co/image/BCY
Opera: https://pixr.co/image/BC7
Opera Neon: https://pixr.co/image/BCF
Edge: https://pixr.co/image/BCG

I'm not an developer. The CSS code based on a Theme I purchased - so I can't give you any further informations.
@bsclifton bsclifton added the needs-info Another team member needs information from the PR/issue opener. label Jul 11, 2017
@bsclifton
Copy link
Member

@c3x do you have a link to the website? Also, do you know if it happens in newer versions of Brave?
I'm going to close this issue but we can re-open if you're able to provide more info. Thanks!

@c3x
Copy link
Author

c3x commented Jul 13, 2017

I can confirm, that the issue is solved into the latest version of Brave.

@bsclifton
Copy link
Member

@c3x thanks for following up 😄

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
needs-info Another team member needs information from the PR/issue opener. webcompat
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bsclifton @c3x