I've come across an issue where the input text in my search form seems to be transparent in Firefox only.
The input text appears in Chrome, and in Firefox (latest stable 40.0.3 on OS X El Capitan 144dpi/retina display) I can still type in the box, it's just that none of the text is visible.
I've disabled all the color properties (in inspector) for both the input element and any parent elements it may be inheriting transparency from.
I've tried applying the !important rule to the input box's color (I know this is bad practice), but the text still refuses to appear in Firefox.
I've read other posts where this has been an issue in older versions of Firefox, specifically before Firefox 4, but I don't see why something like this would happen in Firefox 40. Moreover this form works perfectly on other parts of the site.
You can see the search form live on this page (first element in the sidebar).
Note that the same form appears in the footer with slightly different CSS styles and works fine.
This site is built on the Foundation framework and many base rules are inherited from foundation.css
Related
Some frontend form validation code is changing disabled attribute of a submit button in a form.
For the 2 states (enabled/disabled), they are different css rules applied, one of these is the text color of the button element.
Something that looks like a bug is happening on Safari/Webkit based browser in version 14+ only. The bug is not present on previous safari versions for instance.
The text of the button stays greyed out even after the button being enabled and color rules is updated in CSS rules. In the Devtools, computed property shows the proper color value (see screenshots), but it is not being applied by the browser.
Is this a known issue?
Note: I am using material-UI framework, which means there are some extra layers of code which interfere and makes it difficult to post a simplified sample of code.
But since it is only happening on specific platforms, my guess is that material-ui does not play any role in the root cause.
This was indeed a bug in Safari, affecting version 14.1 to 14.6.
It is fixed since version 14.7.
See here for the root cause.
Some more insight here too.
As the question suggests, I am having an issue with all of the text on my page appearing differently in Microsoft Edge compared to Google Chrome.
However, I would like to keep / use the rendering shown in Edge.
Using JS and/or CSS, is there any way to use the styling in Edge (font family, size, etc.) and apply it in Chrome. I know it sounds silly, but the entire page from the description text to the fields appears far nicer in Edge, and more readable. So, if possible, I would love to somehow use the stying that Edge applies to the page.
The link to my page is: https://donorbox.org/youthminds.
I have included screenshots below of how it looks in Chrome and Edge.
https://i.imgur.com/Gjlefz2.png (Google Chrome) and https://i.imgur.com/qFRb9vH.png (Microsoft Edge).
Some people want to make the -ms-clear pseudo element disappear: Remove IE10's "clear field" X button on certain inputs?
My need is the opposite: I need to have it on FireFox and Chrome too. My client noticed it in Internet Explorer and founded it very useful. I use jquery-inputmask plugin BTW in my app.
https://github.com/RobinHerbots/jquery.inputmask/issues/1172
Addition to the answer:
I just double checked how DataTables's column filters handle this, because I remembered that it provides clear icon on FF and Chrome. I tried it out now in IE, and the IE's pseudo element puts an extra X there! The pseudo element is the bigger one, and the smaller one which is there in FF and Chrome also is a background image justified to the right with a right margin of 5px.
That is a native feature that is shipped with IE10. In order to have something like that in other browsers you will need to create it yourself. Or find a library that has a feature like that.
I'm using a Google CSE on http://afv.com and the results page is so wonky for Firefox and Safari. Here's what I see:
Chrome (looks perfect):
Firefox (magnifying glass gone in blue button, text falls out bottom of input field):
Safari (input field far too wide, sends blue button off edge of page):
I've mucked around with the style sheet Google gives me, to try to override some styles and standardize the output, but I can't see why it's so weird across browsers. Any thoughts? I know using a CSE is a bit of a hack and I'm having to shoehorn it into my layout, but these pictures show some incorrect layouts (or in the case of Safari, wildly incorrect), beyond just minor formatting issues.
This is probably because some of your own css is influencing the search button (e.g. a library like bootstrap or a css reset). If you try a search button without any additional styles - e.g. this one:
enter code herehttp://jsfiddle.net/buQL3/1/show_html/
it should render correctly (renders well for me in OS X 10.8.5 latest Chrome, Firefox 24 and Safari 6.0.5).
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has