I have no idea how this issue started, but I noticed that in my Rails app all <select> inputs render differently in Safari and cause a page refresh when you try to click it.
The problem occurs anytime you add styling to the input that changes background, border, or anything that Safari doesn't really like. A common bootstrap convention adds class='form-control to inputs, and this seems to be causing my problem.
This is the input without any border:
This is the same input with the addition style='border: 2px solid red:
As you can see the background changes and when you click the input, the page refreshes, losing all data in the form, making the form impossible to complete. I think it might have something to do with webkit?
It's worth noting that the refresh does not hit my server and Safari actually displays this message (with no other detail):
If anyone has any idea why this might be happening / how to fix it, please let me know
Related
I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
I found that <input type=“search”> only works in Chrome and IE, but not in Firefox.
How can I make <input type=“search”> show the cancel button (x) in Firefox?
Webkit derived browsers put in an x to clear a value. Firefox does not. However firefox supports this feature, but it does nothing about it and you need to style it your self to show the X button in firefox.
Following link will help you to achieve the goal: HTML Textbox with a clear button in Pure CSS and without JavaScript
While the accepted answer is working as it can be seen in the codepen,
I feel the need to explain how this is working and what to be aware of.
As it took me quite some time to get it working as expected.
For anybody who was wondering how the clear is working type="reset" is causing this. Read more about it here
elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
This brings us to the second point of what to be aware of.
As the docs explains, the input or button of type reset will only work within a form. However, this creates a problem when having multiple inputs in a form, as all of them will be reset.
Another cavity would be the fact, that while fixing the clear button on firefox this will now produce multiple clear buttons in all the other browsers that do have support for it.
A little feature is that the css content also accepts a url(). This means that for instance custom svg's can be used as a clear icon.
I have a page with a pretty big table. Any text input on the same page responds really slowly to typing.
Anybody have any idea what would be the exact cause for this?
Occurs in Chrome (41~), but not in IE 10 or Firefox (30~).
Reducing the number of rows (to 20, for instance) makes the problem disappear.
Chrome's timeline shows ~500ms gaps between keypress/keydown events:
Could the long ng-class, ng-click, and other attributes be hogging Chrome's internal dom event handling?
Testable in this plunker.
(I've got angular all over the place in the original code, but the plunker is stripped of it.)
Thanks!
I'm working with a contenteditable iframe that is being using for basic WYSIWYG editing. I've noticed a strange difference in the way that a Tab keypress event is handled between Chrome and Firefox.
When the document of the iframe has been configured using designMode = 'On', a tab pressed inside the document will skip to the next control in Firefox (expected) but create the following pre white-spaced span in Chrome
<span class="Apple-tab-span" style="white-space:pre"> </span>
Here's an example.
Interestingly, when the body of the iframe is setup instead using body.setAttribute("contenteditable", "true"), which I assumed was the same approach done in a different way, both browsers work as i would expect; moving the focus to the next tab index.
Can anyone explain why?
I'm afraid that the only answer is "just because". Don't expect that there's a reason behind how something works in contenteditable. I experienced hundreds of times that no one really cared or had time to care about that. When you've got bugs like https://code.google.com/p/chromium/issues/detail?id=226941 which make contenteditable totally irritating for users on Chrome & Opera and which hasn't been even confirmed by developers throughout entire year, then a small difference in Tab's behaviour is a detail which you have to fix and forget ;).
Use:
document.designMode = 'on';
Insted of
body.setAttribute("contenteditable", "true")
I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here:
http://kentbrewster.com/android-scroller/scroller.html
... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I scroll the body of the page, it scrolls up and off the screen.
Once it's off screen, hilarity ensues. Sometimes the device will force the scrolling part of the body back down so the cloned blank is back in view; sometimes the keyboard goes away even though the visible box seems to remain in focus; sometimes the keyboard cannot be dismissed even though the INPUT blank is clearly blurred. Here's an example you can run on your Android 2.2 device to see what's happening:
http://kentbrewster.com/android-input-style-bug/
Styling input:focus has not done the trick for me yet, nor have many different brute-force attempts to listen for focus() and blur() with JavaScript and do the right thing with focus and the keyboard.
Thanks very much for your help,
--Kent
This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.
The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.
The solution is to add:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
in your css.
You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.
That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.
As you'll note in the bug raport though, this doesn't work with input[type="number"]...