logo
down
shadow

CSS effect works in Chrome but not IE 11


CSS effect works in Chrome but not IE 11

By : James
Date : November 22 2020, 01:01 AM
With these it helps Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.
I played a bit with replicating your effect by transitioning two pseudo elements independently:
code :
<div id="button1">
    <!-- Preserved your markup -->
    <a href="#" data-text="Search Now!"></a>
</div>
a {
    position: relative;
    perspective: 500px;
}

a, a::before, a::after {
    color: #FFF;
    display: inline-block;
    line-height: 44px;
    box-sizing: border-box;
    width: 155px; height: 44px;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
}

a::before, a::after {
    top: 0; left: 0;
    position: absolute;
    content: attr(data-text);
    transition: transform 1s;
}

a::before {
    background: #0965A0;
    transform-origin: 50% 100%;
}

a::after {
    background: #2195DE;
    transform-origin: 50% 0%;
    transform: translateY(100%) rotateX(-90deg);
}

a:hover::before {
    transform: translateY(-100%) rotateX(90deg);
}

a::before, a:hover::after {
    transform: translateY(0) rotateX(0);
}


Share : facebook icon twitter icon
JQUERY Sliding door effect - works in jsFiddle but not chrome

JQUERY Sliding door effect - works in jsFiddle but not chrome


By : Ricardo Perez
Date : March 29 2020, 07:55 AM
Hope this helps I'm trying to do a sliding door effect using jquery. I have mocked it up in jsFiddle and it works okay in there. The problem I have, is when I run it locally, nothing works. I have downloaded and linked to the jquery library locally, and I have another project where I even link to the API and it works just fine. I don't understand what's going on here, as far as I can tell everything is loading okay, but when I click the link nothing happens. , You need to wrap the jquery stuff so it loads after DOM ready...
code :
$(function(){
    // your js here
})
How can i use the hovering effect on the DIV in top of my css transform in Chrome? (in FF it works)

How can i use the hovering effect on the DIV in top of my css transform in Chrome? (in FF it works)


By : user5909606
Date : March 29 2020, 07:55 AM
I wish this help you The body is preventing the hover event, that is the difference i see between firefox and google chrome. When you add height: 0px; to the body element it does trigger the hover event correctly.
Parallax effect works fine in Firefox & Chrome, but 'misbehaves' in IE 11?

Parallax effect works fine in Firefox & Chrome, but 'misbehaves' in IE 11?


By : SueSingh
Date : March 29 2020, 07:55 AM
seems to work fine Watch the DOM as you scroll and you'll see the problem. A new HTML node is creating during each scroll event:
code :
<div class="fit-vids-style">...</div>
<script>
    var navbar = jQuery('#navbartop');
    var topnavbar = jQuery('#topnavbar');
    var logoGlobeChange = jQuery('.logoColorGlobeChange');
    var logoTextChange = jQuery('.logoColorTextChange');
    var hero = jQuery('#header-section .hero-unit');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 640) {
            navbar.addClass("navbar-scroll");
            topnavbar.addClass("cbp-af-header-shrink");
            topnavbar.removeClass("navbar-static-top");
            topnavbar.addClass("navbar-fixed-top");
            logoGlobeChange.removeClass("whiteLogo");
            logoGlobeChange.addClass("logoColorGlobe");
            logoTextChange.addClass("logoColorText");
            hero.addClass("hide");
            $('.navbar .nav .dropdown-toggle .caret').css({ "margin-top": "22px"});
            $('.navbar .nav li.dropdown > .dropdown-toggle .caret ').css({"border-top-color": "#777777"});
            $('.navbar .nav li.dropdown > .dropdown-toggle .caret ').css({"border-bottom-color": "#777777"});
            $('.customizedModal ').css({"padding-top": "15px"});
            $('.customizedModal').css({"padding-bottom": "15px"});
            $('.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret').css({"border-top-color": "#777777"});

        } else {
            navbar.removeClass("navbar-scroll");
            topnavbar.removeClass("cbp-af-header-shrink");
            topnavbar.removeClass("navbar-fixed-top");
            topnavbar.addClass("navbar-static-top");
            logoGlobeChange.removeClass("logoColorGlobe");
            logoTextChange.removeClass("logoColorText");
            logoGlobeChange.addClass("whiteLogo");
            hero.removeClass("hide");
            $('.navbar .nav .dropdown-toggle .caret').css({ "margin-top": "35px"});
            $('.navbar .nav li.dropdown > .dropdown-toggle .caret ').css({"border-top-color": "#ffffff"});
            $('.navbar .nav li.dropdown > .dropdown-toggle .caret ').css({"border-bottom-color": "#ffffff"});
            $('.navbar .nav li.dropdown > a:hover .caret, .navbar .nav li.dropdown > a:focus .caret').css({"border-top-color": "#ffffff"});
            $('.customizedModal').css({"padding-top": "10px"});
            $('.customizedModal').css({"padding-bottom": "10px"});
        }

        // Basic FitVids Test
        $(".container").fitVids();
    });
</script>
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 640) {
            //...
        } else {
            //...
        }
    });


    // Basic FitVids Test
    $(".container").fitVids();
CSS hide/show effect works on Firefox but not on Chrome/Safari

CSS hide/show effect works on Firefox but not on Chrome/Safari


By : user2658108
Date : March 29 2020, 07:55 AM
hop of those help? I agree with @Huangism who wrote in a comment, that this isn't possible with the :active pseudo class. However, you could use a HTML checkbox, a label for that checkbox and the general sibling selector in CSS (see also).
This is all the HTML code:
code :
<input  id="formatting_show" type="checkbox" />
<label for="formatting_show">Formatting</label>

<div class="formatting_content">Hello World</div>
#formatting_show {
    display: none;
}
.formatting_content {
    display: none;
}
#formatting_show:checked ~ .formatting_content {
    display: block;
}
Inset text effect works on Chrome, but not on Firefox

Inset text effect works on Chrome, but not on Firefox


By : Krishacamille Barja
Date : March 29 2020, 07:55 AM
may help you . The problem and solution
Firefox is not containing the text-indent, so use padding-left instead.
code :
body {
  background: #3fa46a;
}
.inset-text-effect {
  display: inline-block;
  box-sizing: content-box;
  border: none;
  border-radius: 0 50px 50px 100px / 0 100px;
  font: normal 70px/1"Comic Sans MS", cursive, sans-serif;
  color: rgba(48, 48, 48, 1);
  text-align: justify;
  text-transform: normal;
  padding-left: 44%;
  text-overflow: clip;
  white-space: pre;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
  box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.5) inset;
  text-shadow: 1px 1px 0 rgba(140, 140, 140, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.67);
  transform: rotateX(-25.21014298575622deg) rotateY(-38.38deg) rotateZ(-18.0535228296deg);
}
<nav class="cl-effect-9">
  <div class="inset-text-effect">iCage</div>
</nav>
Related Posts Related Posts :
  • Bootstrap3 - Removed container-fluid
  • Bootstrap framework not responsive for asp.net webform
  • How to align two inner divs inside outer absolute positioned div that has fixed width in which both divs have the same w
  • Div to ignore html tags
  • Prevent caching and stale content with a static web site
  • Is there a way to change the whole document with one selector in CSS?
  • why cant I click om my navigationbar links?
  • Is there a CSS/HTML way to cut multiple shapes out of the top/bottom of a div?
  • css border around multiple links/images
  • 'No data was received in the uploaded file', but file is not empty
  • How input boxes save previous entries
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org