I'm playing around with CSS 3D animations and I've hit a strange problem.
What I'm doing
Created a card which has two sides, front and back, both images.
Problem
The first time the card flips to show the back card it does not do it smoothly, you see the first card spinning around and then you see nothing for a split second and then the back card just snaps into view.
Weird
It's only the first flip that's wrong, all other flips after it look smooth and exactly what I'm looking for.
What I thought the problem might be
That the back image was not loaded yet by the time the first flip happened. I tried to preload the image with JS but it did nothing.
JSFIDDLE
http://jsfiddle.net/mz49d/
It's very annoying and I'd like to hear anyway I can fix this. I've even thrown in every vendor prefix in the CSS but it changed nothing.
EDIT
I just tested it in FF30 and it seems to work. It does not work in my Chrome 36.0.1985.125.
It looks like putting the images as css-background-images works in Chrome and FF.
Not sure if there are any drawbacks to using this method on other parts of your project though...
HTML
<div id="card">
<div class="card-side front-card"></div>
<div class="card-side back-card"></div>
</div>
CSS
.front-card {
background: url(http://images.wisegeek.com/planet-earth.jpg);
}
.back-card {
background: url(http://haughtonmarsproject.com/wp-content/uploads/2013/11/Mars-1-Project.jpg);
}
Related
The problem is the following: I have a gallery plugin on Wordpress, called Fancy Plugin installed. Works fine, except now when I look at the gallery, the images are very very faint (the opacity is very low), then, if I hover over the image, it gets less opaque, then I hover again and it gets better and better. I need like 10-15 mouse passes for the image to be on opacity close to 0.9, but then it does not change anymore. I want to switch this off completely, I do not want any kind of opacity in the gallery, I want it to be 1. I don't know what CSS to use to do this.
I tried inspecting with Chrome DevTools, that's how I found this piece of code:
<img class="fg-thumb" src="http://www.faktumkft.hu/wp-content/plugins/radykal-fancy-gallery/admin/timthumb.php?src=http%3A%2F%2Fwww.faktumkft.hu%2Fwp-content%2Ffancygallery%2F2%2F2%2Fvizszintes_palcas_korlat__09.jpg&w=200&h=150&zc=0&q=100" alt="Vízszintes pálcás korlát, ívelt" style="width: 200px; height: 150px; opacity: 0.825593;">
I can see the weird opacity number that seems to be kind of random, there, but I don't know how to change it. Can someone help please? Thanks!
Fast fix would be adding next to your css:
.fg-thumb{
opacity:1 !important;
}
However what you find pointing to so called in-line styles, and they may come from some javascript (may be from that plugin). You may want to read some documentation or/and check source code if it is available.
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
EDITED:
I have used tinymce editor to add text with external toolbar, Please look into it TINYMCE-DEMO
And everything is working same as i have mentioned below.
I have a transformed(scaled) div element with contentEditable="true". Now the problem is when I start typing on this div box then the blinking cursor sometime get hide in Firefox, but in chrome it is working perfectly. I don't understand what is wrong with this code.
Here is my code:
HTML-
<div contentEditable="true" id="textbox" class="scaleDiv">Add Text Here...</div>
CSS-
<style>
#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
</style>
And Here is the
DEMO
If you move your cursor after typing from left to right or right to left then you can see the cursor - sometimes get visible and sometimes get hide.
Please Help...
It will be down to the use of different aliasing methods when scaling, or the fact that Chrome makes a concerted effort to keep the cursor alive. What is happening in FireFox is that at certain points the single vertical line (i.e. cursor) is being scaled away, this happens sometimes when using certain types of scaling, like nearest neighbour. This problem could be OS specific, I see it with the FF 26.0 on Windows.
For example:
Take this image:
And then scale it 0.75 (I've used PhotoShop and Nearest Neighbour here, but the principal is the same)
As you can see some of the lines have vanished.
Basically you need to look into if it is possible to change the type of scaling used in FireFox and with CSS. Sadly, from what I can see so far, it is only possible for images using the image-rendering css property or the Microsoft non-standard -ms-interpolation-mode...
You can see this working/breaking here: http://new.campchampions.com/parents
The issue only crops up in IE10. After the user has scrolled a little ways, the navigation becomes pinned (a class of fixed gets added to the body which effects the hgroup.primary(I know, I know hgroup is not a 'thing' anymore. Don't judge me.)). If you go back to the top of the page, it un-pins, goes back to normal.
In IE10, when you go back up to the top of the page, the nav elements disappear until the mouse moves up over ANY part of the yellow bar. It's driving me nuts.
I've attempted things like having JS append/alter content in various elements on scrolltop/un-pinning the navigation.
I've got a brief youtube video showing the issue: http://youtu.be/-itTC_j-9YE
Any thoughts, or ideas? That'd be great. Thanks!
While I have no solid answer for the reason behind this redraw issue, I found that an instantaneous jQuery hide/show redrew the element completely without any visible side effects.
Using a non-jQuery JS hack to add a class to the HTML element in IE10 (see Willem de Wit's answer to this quandry), I made sure this code only fired on IE10.
if($('html').hasClass('ie10')) {
$('.primary').hide(0, function(){$(this).show()});
}
My bootstrap labels and badges disappear off the webpage when the page loads for the first time, using my samsung galaxy s3 they only reappear after when I refresh the browser window. Why is this happening and how can I simply force them to appear the first time the page loads please. My labels and badges are not empty, so the display none function has nothing to do with it.
An example of the code as it is that does not display the first time the page loads is:
<span class="badge badge-important">info</span>
also tried to remove below with no luck
.label:empty,
.badge:empty { display: none; }
The normal boostrap.css is attached to my page and its the only style sheet that has the label selector in it.
Has anyone come across this weird sort of thing?
Thanks
Okay, had this problem on a Samsung Galaxy Note tablet, an LG Optimus phone, and an LG Nexus phone. When I removed the below code from the bootstrap CSS file completely, the problem went away.
Remove:
.label:empty,
.badge:empty { display: none; }
Looks like the Samsung/LG browser ignores the :empty and just makes the .label and .badge display:none whether it's empty or not.
I know that the original questioner said that he tried this and it didn't work (cache issue maybe???), but it did work for me, so I thought I'd at least post the answer since this was the #1 google result when I ran into the problem.
I have the same problem.
When i try this in my web browser all works fine.
<div>
some text <span class='badge'>1</span>
</div>
But, when i try it in my android browser, the badge not show. I solve this problem with.
<div>
<span> some text <span class='badge'>1</span> </span>
</div>