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()});
}
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
On mobile (or desktop with small window size to replicate mobile, as per the screenshots) the form on my page loads fine with default dates, but when a new date range is selected the form shifts to the left after making the selection (or rather, a gap is inserted to the right) but I can't find anything using F12 developer tools that is causing it. It is not possible to scroll to the left.
On page load:
After selecting dates:
The form itself is displayed by embedding a third party JavaScript link on the page - is there anything I can do to prevent this from happening? I can't figure it out!
Note: The page uses a YouTube video background which is blocked by the firewall where I am working from at the moment (hence the grey background), but is not causing any JavaScript errors. The problem is the same on all mobiles and on networks where the background is able to load.
Live example at #########.com (address will be removed when resolved)
Thanks
UPDATE: As per the answer from Wouter, removing the overflow: hidden from <section class="gg-section hero video-home" id="dots-section1"> fixes the issue, but unfortunately that causes other layout problems so cannot be applied.
The problem is likely to be caused by the video being 300% width. Try to set a overflow: hidden; to the following element:
<div class="video-background">
May not help but..
I had a similar issue with page jumping and forms before.
It was caused by an <input class="hiddencheckbox" type="checkbox" />.
Every time I used js select/deselect the checkbox, the browser would try and jump to the checkbox position, which I had hidden by moving its position outside the viewport.
.hiddencheckbox {
position:fixed;
right: -1000px;
// BAD WITH JS
}
I removed the positioning and changed it to:
.hiddencheckbox {
display:none;
}
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...
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard