Tongits go login free ios,Laro ng slot p download.REGISTER NOW GET FREE 888 PESOS REWARDS!

vkhu

(@vkhu)

10 years, 10 months ago

Hi guys, this is the site I am building (using child theme of customizr): bookism.net

The carousel/slider was made by modifying code from here:
https://codepen.io/Kseso/pen/xltKd

The code work like a charm in Chrome and Opera, but when I test it out in other browsers, problems arise:

In Opera Mobile and Firefox Mobile, the front image takes up the whole screen. animation doesn’t work, the image can change like normal. You can watch it here (Opera) and here (firefox)
In Firefox, everything stacked on top of one another, the animation doesn’t work. The image just change like power point slide. Here is a video
In Safari, the front image take up the whole screen, animation STILL work, but can’t zoom out. Here is a video

I have no idea what caused those issues. Can someone help me look for the bug?

Here is my style.css code:

body {
    background: #FFFFFF;
}
header {
    background: #FFFFFF;
}

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border: 0 none;position: relative;}

@font-face {
    font-family: 'assassin';
    src: url(fonts/UVF_Assassin.ttf);
}
.assassin {
    font-family: 'assassin';
}
  /*
  Change the size in .galeria
  */
.galeria {
  margin: 2vh auto 0;
  width: 28vw;
  -webkit-transform-style: preserve-3d;
}
.galeria:before {
  content: '';
  padding-top: 120%;
  display: inline-block;
  width: 0;
}

.card {
  background-size: 2px 2px, cover;
  background-repeat: none;
  background-position: 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 1rem rgba(0,0,0,.5);
  border-radius: 3px;
  font-family: 'Great Vibes';
}
.una {
  background-image: url(images/carousel1.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.dos {
  background-image: url(images/carousel2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.tres {
  background-image: url(images/carousel3.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.card p {
  text-align: center;
  color: #fff;
  font-size: 5vw;
  line-height: 1.3;
  margin-top: 3vh;
}
.footer {
  background: #0D757D;
  position: absolute;
  margin: 0;
  margin-bottom: 1vh;
  bottom: 0;
  width: 100%;
  height: 5%;
  list-style-type: none;
  color: #ffffff;

}
#uno:checked ~ .una .footer,
#dole:checked ~ .dos .footer,
#tele:checked ~ .tres .footer {
  background: #0D757D;
  color: #ffffff;
}
li {
  float: left;
  width: 33.33%;
  text-align: center;
}
li:before {
  font-size: 4vh;
  line-height: 8vh;
}
input {visibility: hidden;}

/*
Next/Previous buttons
*/
label {
  background: #FFFFFF; /*Color Next/Previous buttons*/
  position: absolute;
  top: 0; bottom: 0;
  margin: auto;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 150%;
  font-weight: 900;
  color: #000000;
  line-height: 2.8rem;
  height: 2.8rem;
  width: 2.8rem;
  -moz-border-radius: 1.4rem;
  border-radius: 1.4rem;
  box-shadow: 0 0 .2rem .22rem rgba(0,0,0,.5);
  padding: auto 0;
  cursor: pointer;
  transition: .3s linear;
  text-align: center;
  opacity: .6;
}

.otra + .otra,
#uno:checked ~ .tres .afin,
#dole:checked ~ .una .afin,
#tele:checked ~ .dos .afin {
  right: 0;
}
#uno:checked ~ .una .otra,
#dole:checked ~ .dos .otra,
#tele:checked ~ .tres .otra {
  background:  #FFFFFF; /*Color Next/Previous buttons*/
  display: block;
}
#uno:checked ~ .una .afin,
#dole:checked ~ .dos .afin,
#tele:checked ~ .tres .afin,
:not(:checked) ~ .otra
{display: none;}

.card:hover label + label {
  -webkit-animation-delay: 1s;
}

/*
On hover Next/Previous buttons
*/
.card:hover label:hover {
  opacity: 1;
}

#uno:checked ~ .dos,
#dole:checked ~ .tres,
#tele:checked ~ .una {
  -webkit-animation: 1.3s fuera-izq;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform-origin: center left;
  z-index: 2;
}
#uno:checked ~ .tres,
#dole:checked ~ .una,
#tele:checked ~ .dos {
  -webkit-animation: 1.5s fuera-dch;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform-origin: center right;
  z-index: 2;
}
#uno:checked ~ .una,
#dole:checked ~ .dos,
#tele:checked ~ .tres {
  -webkit-animation: 1.2s central;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform-origin: center center;
  z-index:3;
}

@-webkit-keyframes fuera-izq { /*left*/
  0% {-webkit-transform: scale(1) translatex(0%);}
  80% {-webkit-transform: scale(.8) translatex(135%);}
  100% {-webkit-transform: scale(.8) translatex(55%);}
}
@-webkit-keyframes fuera-dch { /*right*/
  0% {-webkit-transform: scale(1) translatex(0%);}
  80% {-webkit-transform: scale(.8) translatex(-135%);}
  100% {-webkit-transform: scale(.8) translatex(-55%);}
}
@-webkit-keyframes central {
  0% {-webkit-transform: scale(.98);z-index: 1;}
  4% {-webkit-transform: scale(.98);z-index: 1;}
  60% {-webkit-transform: scale(.55);z-index: 1;}
  80% {-webkit-transform: scale(1);z-index: 3;}
  100% {-webkit-transform: scale(1);}
}
@-webkit-keyframes pulso {
  100% {opacity: 1;}
}

.linkcard {
    color: #FFFFFF;
}
.linkcard:hover {
  color: #FFFFFF;
  opacity: .3;
  -webkit-animation: pulso .75s infinite alternate;
}

Here is the html (header only):

<!DOCTYPE html>

<head>
    <?php wp_head(); ?>
    <title>bookism - t? sách s? c?a ng??i vi?t
    </title>
	<div id="headerimg">
                    <div style="text-align: center;margin-top: 1vh">
                        <a href="<?php echo get_option('home'); ?>/">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/header1.png" alt="bookism">
                        </a>
                    </div>
        </div>

<script>
    window.open    = function(){};
    window.print   = function(){};
    // Support hover state for mobile.
    if (false) {
      window.ontouchstart = function(){};
    }
</script>

<div>
  <section class="galeria">
  <input type="radio" id="uno" value="1" name="tractor" checked="checked">
<input type="radio" id="dole" value="2" name="tractor">
<input type="radio" id="tele" value="3" name="tractor">
  <article class="card una">
    <div class="assassin">
      <h1 style="background:#e74c3c;border-bottom:2px solid rgba(0,0,0,0.25);border-top:2px solid rgba(0,0,0,0.25);text-align:center;text-shadow:none;font-size:150%">
          <a href="https://docs.google.com/spreadsheet/ccc?key=0AoqasbNhIES0dExadlc2Z2FGdWFWVGh1V0NWY055UVE#gid=10" target="_blank" class="linkcard">
              WORLD WAR Z
          </a>
      </h1>
    </div>
    <ul class="footer">
        <li class="entypo-bell">&nbsp;</li>
        <li class="entypo-mic"><div class="assassin">Max Brooks</div></li>
      <li class="entypo-megaphone">&nbsp;</li>
    </ul>
    <label for="tele" class="otra"><</label>
    <label for="dole" class="otra">></label>
  </article>

  <article class="card dos">
    <div class="assassin">
      <h1 style="background:#e74c3c;border-bottom:2px solid rgba(0,0,0,0.25);border-top:2px solid rgba(0,0,0,0.25);text-align:center;text-shadow:none;font-size:150%">
          <a href="https://docs.google.com/spreadsheet/ccc?key=0AoqasbNhIES0dHFoTl91c2tYc21TbFpJMWtKM0FENFE#gid=6" target="_blank" class="linkcard">
              T?I, NG??I MáY
          </a>
      </h1>
    </div>
    <ul class="footer">
        <li class="entypo-bell">&nbsp;</li>
        <li class="entypo-mic"><div class="assassin">Isaac Asimov</div></li>
      <li class="entypo-megaphone">&nbsp;</li>
    </ul>
      <label for="uno" class="otra"><</label>
      <label for="tele" class="otra">></label>
  </article>

  <article class="card tres">
    <div class="assassin">
      <h1 style="background:#e74c3c;border-bottom:2px solid rgba(0,0,0,0.25);border-top:2px solid rgba(0,0,0,0.25);text-align:center;text-shadow:none;font-size:150%">
          <a href="https://www.rubbishworks.com/images/not_available.png" target="_blank" class="linkcard">
              C?NG VIêN K? JURA
          </a>
      </h1>
    </div>
    <ul class="footer">
        <li class="entypo-bell">&nbsp;</li>
        <li class="entypo-mic"><div class="assassin">Michael Crichton</div></li>
      <li class="entypo-megaphone">&nbsp;</li>
    </ul>
    <label for="dole" class="otra"><</label>
    <label for="uno" class="otra">></label>
  </article>
</section>
</div>
<hr />

I have just taken up html and css one week ago so there are a lot I don’t understand. Please excuse the noobie-ness.

Viewing 3 replies - 1 through 3 (of 3 total)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 10 months ago

Does the same issue occur on the slider’s demo site, outside of WordPress?

Thread Starter vkhu
(@vkhu)

10 years, 10 months ago

@andrew Nevins:
It works fine in firefox and opera, but have the same issue in opera mobile, safari and firefox mobile.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 10 months ago

If browser compatibility issues occur outside of WordPress then you may need to talk to the developer who created the CSS carousel

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Pure CSS image carousel doesn't work cross-browser’ is closed to new replies.

Pure CSS image carousel doesn't work cross-browser

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics