html5,css3,twitter-bootstrap,transition , CSS 3 Transitions - Flickering Content with Bootstrap 3.2

CSS 3 Transitions - Flickering Content with Bootstrap 3.2


Tag: html5,css3,twitter-bootstrap,transition

I am experiencing a strange flickering effect when attempting to use bootstrap 3.2 and css3 transitions to simulate a horizontal flipping effect. The flipping happens but the content on the back side of the "Card" flickers rapidly during the transition. I have included a JSFiddle of the problem. This is happening in chrome. In IE the back side of the card is not displayed at all after the transition.

I am using backface-visibility: hidden as seen in this code snippet

.flippable > figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: all ease-in-out 0.5s;

Thanks in advance for any help on this.


The backface-visibility : hidden doesn't work because it needs transform-style: preserve-3d in the element itself, not in the parent

.flippable > figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all ease-in-out 0.5s;
    transform-style: preserve-3d;

and now this is useless:

.flippable.flipped .front {
    visibility: hidden;



CSS3 Columns children with margin issue w// Chrome

javascript,jquery,html,css,css3 On the page above you can see that the second column is pushed down a little from the top. On a page resize the issue corrects itself. All other pages, even those with the same number of <p> tags for the .content render the columns correctly. I have no...

How secure are HTML5 forms?

<input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/> Would someone be able to disable this min="5" statement and then submit the input with a negative value. Or for example bypass the type=number statement and enter a symbol...

Regex not working in HTML5 pattern

So I have this regex intended to let pass all text but those that contain as initial chars the "34" sequence: ^(?!34)(?=([\w]+)) The regex is working fine for me in , check the tests to see the intended behavior. Any Idea why it isn't working in my form? <form>...

Fit an image inside a div that also has a title?

Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

validation of AngularJS direcrives

I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

Teechart HTML5, line color and thickness

How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

How do you make a div only extend in one direction when the outer container size increases?

I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...

Saving image to localstorage - canvas

I'm using html5 storage to store my image. It works great in chrome. In FireFox it works 8/10 times. function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); console.log("line 1 : " + img.src); var dataURL = canvas.toDataURL('image/jpeg'); console.log("line...

drop down menu toggle does not work

So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

Two div side by side in one container css

I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container. .conteiner { position: relative; } .image{ display:...

CSS :hover that shows more than one image

I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

More modern image maps?

With all the recent advances in JavaScript/HTML5 it would be nice to think there would be a more modern way of implementing an image map. I know you can set a map property for the tag but I don't think this supports nicely formatted tooltips on rollover (near the region)....

Is there an opposite CSS pseudo-class to :hover?

Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

How can I make a DIV element Fixed but non-Scaleable?

Hopefully I'm asking this question right. Basically, I'm trying to implement a drop down menu into my design. I've been looking around for help coding it, since I'm still relatively new to HTML/CSS and found a few great tutorials that I have altered a bit to match what I have...

Pure Css transition slide down panel not working

Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

Div Text's Color Changes when Printed

I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Click on link next link should be display on same page

I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

JSON.parse parsing a string into string

I have confusion over the functionality of JSON.parse. I am writing code : dynamicMsgObj = '"rest, no disc"'; var jsonObj = {}; var isJsonString = function isJsonString(str) { try { jsonObj = JSON.parse(str); } catch (e) { return false; } return true; }(dynamicMsgObj); console.log(isJsonString);// returns true console.log(typeof jsonObj);//returns string How...

Using Aria to make a div table accessible

Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. Solutions: Only using...

why i don't get return value javascript

When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

CSS Image Background - Same Scale Across Different Devices

I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types. Things I...

Colour overlay on hover

I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

How to position div which contains font-awesome icons to centre of another div?

I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

Float left and float right not working + sub-menu positioned under first UL item?

Been learning CSS and HTML quite a lot lately, and although I already know about stuff like float, positioning, margins, padding, etc, for some reason splitting up these 2 things are not working... And also my submenu is a bit wrong, refer to the image below: As you can see...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3

I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

jQuery & CSS only load after many refreshes

If you open this page in IE11, the CSS and jQuery don't load: If you refresh the page once, maybe even twice, it still doesn't load. But if you hit F5 a bunch of times in succession, the CSS and jQuery finally load and the page displays correctly. This...

Round edges on shorter side in CSS [duplicate]

This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

Using CSS :after to shade a button:hover

I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

CSS drop down navigation

I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

How to make my nav bar responsive

I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

Setting up the page grid using push and pull

I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Show only the requested forms using JS

As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible. How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"? So, if the user clicked on the "send an invite"...

Swap nav and div vertically uing CSS only

So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

Tagging values in HTML document for automated extraction

We have a series of documents that are being converted to HTML for web access. The documents are operating instructions that list actions people have to do as well as distinct requirements. We wanted to put a tag around each requirement so it can be automatically extracted using some code....

CSS: How to flow text around both left and right images

I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

Redraw text over clearRect HTML5 Canvas

I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....

Add CSS3 transitions to jQuery Animate script

Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

Load javascript in consecutive order after browser load event

What am I trying to do? In an attempt to speed up my website I am loading non-essential javascript after the browser load event. (So the JS files are not render blocking) This is currently functioning correctly. What is the problem? The problem is sometimes the non-essential javascript depends on...

How can you drop an image from your desktop into an editor and move it around?

The default behavior when you drop something from your desktop to a textarea is that you will see the path to the image at the position where you dropped it. My end goal is to convert the local image as base64 and insert it at the drop position within the...

Dynamic font-size according to device

Small question, for which I can't find any answer. Is there a way to do this? I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to...

How to change my table based on screen size?

I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended...

What is the semantic HTML tag to display for URLs that are not links?

I have a search engine plugin that outputs results in a basic structure: <a href="page url"> <div class="searchResult"> <h3>Page title</h3> <p>Page url</p> <p>Page <meta> description</p> </div> </a> The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable...

Animate removal of list items with css

I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...