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;
}
Related
I have a list of items on a page which requires a scrollbar. We originally used Perfect Scrollbar but we have since removed it from the codebase after an update caused some unexpected behaviour. The scroll functionality should now be handled completely by the browser/css settings.
The issue is that the "scrollbar thumb" cannot be grabbed by the cursor unless an item is first selected in the list, the "scroll wheel" on the mouse is still able to activate it. Unfortunately this has caused confusion for some users. There are no other scrollbars active on the page when it is first loaded. This behaviour is the same on both chrome and firefox browsers.
Here is a snippet from the DOM:
The only scroll-relevant css I can find in the DOM is for these classes
.email-application .email-app-list-mails {
overflow: auto !important;
}
I have had a look at the different scroll related CSS attributes but as far as I can tell none of them will affect this issue.
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;
}
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()});
}
I am making a HTML/CSS and jQuery-based file manager aimed at mobile devices. Part of it involves the use of CSS=based modal dialog boxes for various file operations (copy, delete etc.).
I achieve the modal dialog behaviour like this:
<div id="overlay">
<div id="modalBoxControls">[close]</div>
<div id="modalBox">
<div id="modalBoxContent"></div>
</div>
</div>
And the CSS is:
#overlay {
position: fixed;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background: ([semi-transparent png]);
display: none;
}
#modalBox {
width: 80%;
background-color: #fff;
margin: 0px auto;
opacity: 1;
}
I use jQuery to show and hide it by calling .fadeIn() and .fadeOut() on the overlay element.
So far so good - this works great in all the browsers on my dev machine.
However, when testing on my WP7 (Samsung Omnia 7), a rather bizarre thing happens. The modal dialog shows up fine, the page behind it is blacked out. But clicks (or taps) go through the #overlay and activate anything behind it, even though it totally covers up everything behind and it's z-index is 1000.
I also tested this with the well-known "Lightview" plugin from Nick Stakenburg (a well-tested and refined piece of code) and found the same behaviour on IE on WP7.
So it seems like this could be a bug with the browser itself.
Does anyone know any solution for this?
Edit - jsFiddle with example of problem
So, check this out in your WP7 device and see how the files can still be clicked even when there is an overlay over the top of them: http://jsfiddle.net/michaelbromley/CHU76/
If by "activate anything behind it" means input controls like text input then I had the same issue. To be honesty I don't know a good solution. My workaround was disabling input controls during popup is showed and then activating them back by removing disabled attribute. The problem seems not to be related to jqmobile, but supposed to be a general behavior.
OK, so it seems that there may be no "proper" solution to this problem (hey, 24 hours is a long time on SO!), so I have come up with my own hack solution:
I when the modal dialog box is opened, I simultaneously set the "visibility" CSS property of all the elements "behind" the overlay (i.e. links and anything else that would otherwise erroneously respond to taps/clicks) to "hidden" (by using jQuery's .css() function). This means that the page layout is not affected, and that there is now nothing there to be clicked on.
As I said, this is a bit of a hack and will not be suitable for everyone who runs into this problem. However, it works well for me.
Code in jsFiddle: http://jsfiddle.net/michaelbromley/CHU76/1/
Yes, this is clearly a bug in Window Phone 7 and it is not even fixed in Windows Phone 10.
I will report this bug to Microsoft and hopefully it will be fixed.
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.