Placeholder text of fields in IE10 of the font family Comfortaa seem to be cut off on the right side.
Here is the fiddle: http://jsfiddle.net/fA89K/2/
It only happens on the initial paint of the browser in IE10. I tested it with a different font and it works fine. Comfortaa seems to be causing the issue...any suggestions on a fix (besides using a different font)?
I could always focus and unfocus the form fields on load...but that just seems really silly.
Edit:
Here is a screenshot:
Yeah I'm seeing the same issue on Win7 IE10. It shows if you focus on the field then un-focus which doesn't really help.
The solution is to set the letter-spacing to .01em then onload set it back to 0.
Works a treat.
Related
I was looking at a friends website and noticed most of the text has the bottom cut off but only when viewing in chrome. I poked around in the css but couldn't seem to find the issue.
Can anyone help me out?
The site is http://www.customcasez.com/
The same issue exists here, Bubbler+One font (at least for me in chrome).
here is an image about how it looks at my place.
So, I guess the issue is not with your website but with the font itself.
Try replacing the font-family with some similar font or try to download it from another source
I've had the same issue. Text in input box looked fine in Firefox however it was cut off from bottom in Chrome.
Check with padding of the input box, it is smartly managed in Firefox but not in Chrome!
I gave padding as padding:0px 6px; (or whatever you intend to give!)
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
I've been searching for answers, but unfortunately still havn't found one the right one..
I'm creating buttons using images and the button itself looks good in ALL browsers..
The thing is though that the text is placed differently (vertically) depending on which browser you are viewing it from. I've tried applying both line-height, padding/margin, top/bottom and several other attributes, but without success..
Isn't there a way (with CSS) to place the text correctly in all browsers? (Opera, Firefox, Chrome, Safari)... Don't worry about Internet Explorer - I'll apply some speciel CSS for this!
I've put up an example here to play around with: http://jsfiddle.net/GydjP/1/
button::-moz-focus-inner {border:0;padding:0;margin:0;}
and adding Line-height to the buttons is apparently the best solution I can find for my buttons so far.. It doesnt work in very old versions of Firefox + Chrome though
I've run into one of many Internet Explorer bugs ;)
I'm doing some custom styled input fields and they work exactly as supposed in all browsers, except IE! The inputfields have some padding added on both sides, which works fine on load when the input field isnt filled out with text. But whenever the inputfield gets filled out with text, it kind of ignores the padding that it has been given..
I've uploaded a screenshot of the problem:
...and made a very simple example so you can try for yourself: http://valuable.dk/test.htm
How do I solve this :) ?
Here's a quick demo, Safari only. http://jsfiddle.net/2late2die/8AJnD/
If you remove the perspective style, all checkboxes appear normal. Using -webkit-transform-style:preserve-3d does the same thing (i.e. checkboxes disappear). Seems to apply to radio boxes as well but not input elements.
Most likely this is a bug in Safari but I just wanted to confirm that there are no solutions to this.
Yes it is a bug in safari. Chrosme does not even support it yet.
here is an example that works in safari: http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html
This means that it is really the inputs that break the page. try to submit the bug to apple :)
Here is the same page with 2 inputs added to it: http://jsfiddle.net/8AJnD/17/
as you see they do not show.