I just am completely clueless here, I've never seen any issue like this before. I have two buttons, one says 'Quote' the other says 'Order'. On chrome these buttons work perfectly and are amazingly responsive when the window is resized the button look does exactly what I want it to, the same goes for firefox, it just works great.
Safari on the other hand is a totally different story, the buttons are there and clickable and fully functional, however they are invisible. I just see nothing...
Here's the HTML code for the buttons:
<a ng-hide="shoppingCartHeader" href="#" ng-click="checkout({{project.id}})" id="btn-complete-btn" class="btn btn-info">Order</a>
<a style="margin-right:20px;" ng-hide="shoppingCartHeader" href="#" ng-click="quoteRequest({{project.id}})" id="btn-quote-btn" class="btn btn-warning">Quote</a>
Here's the CSS code for the buttons:
#btn-complete-btn
{
position:fixed;
right:5px;
bottom:5px;
z-index: 99004;
}
#btn-quote-btn
{
position:fixed;
right:55px;
bottom:5px;
z-index: 99004;
}
You don't see them on Safari but you can still click on them and they work and seem to have the correct sizes... They're just invisible.
The difference between chrome and safari is that the buttons are just invisible on Safari but they can still be clicked on, even if the window is resized....
Is there a work around for this on Safari???
I had the same issue, which led me to this page.
Let me share with you what worked for me.
I created a new class to assign to button tags.
It did no harm in Chrome.
<style>
.safaribtn {background-color:silver;}
</style>
Related
I'm having trouble with a specific browser/device which I need to serve for my website.
Essentially, I have anchor tags which display a hidden element when clicked. This works as intended on everything (Firefox/Chrome/IE on PC, Android FF/Chrome/Browser) except iOS. When clicking the "View Bio" link, the text should transition in and be displayed. When doing this on iOS a grey box hovers over the element (so I assume it knows there is something there), however it does not show the hidden element.
After doing some research I can see that there may be an issue with the way iOS deals with "onclick" or something to that effect. I have tried to implement a few different things (mainly java-based) though they haven't worked. They may not actually be what I need to do, as this implementation is purely HTML/CSS based, but I've tried everything I've come across. Most of the fixes involved generally don't involve hidden elements, and are more often simple "scroll to point" implementations. It's likely the same thing.
As far as I can tell, there is some sort of bug or dislike of anchor tags with iOS, from the articles/existing help pages I have read. It may not be applicable, but according to some users iOS does not serve "onclick" or "click", and rather uses some form of "touch".
Is there a workaround to this? It shouldn't matter if it's a little messy, so long as it serves iOS users as intended. If there's a way to listen for a "click" and treat this as a "touched" for iOS that would probably be the simplest solution. I'm no expert, so I could be well off the mark.
My code:
<div class="dimg">
<img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive" style="border:2px solid #535353;">
</div>
View Bio
<div id="desk" class="trans">
<p>This is the text to be displayed when the anchor is clicked</p>
CSS:
.showme {
text-decoration:none;
color:#535353;
letter-spacing:1px;
}
.showme:focus + #desk {
opacity:1;
visibility:visible;
position:relative;
}
#desk {
visibility:hidden;
opacity:0;
position:absolute;
border-radius:10px;
margin-top:10px;
text-align:left;
}
There is a problem with CSS :focus on iOS Safari.
The answers from this question seem to work. You need to add tabindex="1" to your link:
View Bio
https://jsfiddle.net/1kqxopzs/
I would like to add a position effect on :active state on my bootstrap buttons. Unfortunately, the IE does not render the effect properly. Please use this site and compare the effect between Chrome/Firefox and IE 10/11:
http://jsfiddle.net/stebir/f0nw6kp2/2/
If I click on the button, I expect a smooth top transition (which works like a charm in Chrome and Firefox). But IE shifts the label "Button" slightly to right. It's a very subtle effect, but nevertheless it's annoying...
Do you have any idea to prevent this in IE?
Regards, Steven
[1]: http://jsfiddle.net/stebir/f0nw6kp2/2/
This is default functionality in IE... but there are a couple of ways around it.
Use an anchor instead of a button.
<a id="myBtn" class="btn btn-warning">Button</a>
Use a span with posistion: relative to keep the text in place.
<button type="button" id="myBtn" class="btn btn-warning"><span>Submit</span></button>
button > span { position:relative }
http://jsfiddle.net/pv01x0ud/
I'm trying to make a site accessible, and have a link that is hidden by default unless keyboard focus is placed on it, in which case it becomes visible. The link skips past a YouTube video and onto other content. What I have works fine on a desktop, but using Safari with Voiceover on a mobile device, once the link is read, focus returns to the title of the page. What I have now is:
<div class="skip-link"> Skip the Youtube Video</div>
...
<a class="hidden" id="skipvideo" name="skipvideo" tabindex="-1"></a>
The CSS:
.skip-link a,.skip-linkvideo{left:-10000px;position:absolute;color:#fff}
.skip-link a:focus, .skip-link a:active{
left:0px;
position:relative;
outline-style:solid;
height:22px;
padding:2px;
}
Does anyone have an idea why voiceover does this?
Turns out that the difference in positioning of elements normally and on focus is what was causing the problem.
Changing from absolute to relative caused the other elements to be bumped down, which causes VoiceOver to see it as a page refresh.
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.
Please review the link: http://www.useboom.com/
The video in home page works fine in other browsers but in chrome the Play and Volume buttons have a white square on top.
The buttons were fine and visible before, we've been deleting unused files and suddenly started to appear this way.
I don't know what is the problem!
I had the same problem with Chrome and worked out it is caused by styling "input" without specifying which one exactly i.e.
input {
background-color:white;
}
Using:
#my_div input {
background-color:white;
}
solves the problem. Hope this helps.