I've been experiencing a strange phenomenon with the webfonts I use on my website. There seems to be a problem with the font-smoothing properties. Here you have an example:
The first example is how my posts usually display on my 1920x1080 desktop monitor. The second example is how they should actually display, achieved through opening the Chrome DevTools and closing them immediately, (why does that work, I have no idea).
I've tried a diverse range of methods from the Internet(s), but none seem to work. No -webkit-font-smoothing, no text-shadow, nothing.
Aditionally, the website seems to only have trouble with that display: widescreen 1920x1080. I have tested it in a diversity of displays with diverse amounts of success, but I haven't been able to isolate the cause.
EDIT - MORE INFO:
Smoothing works just fine on my Mac Pro 13' with Retina and my iPhone 5, as well as my Android tablet.
Smoothing doesn't work in any browser used on my Windows Laptop at 1920x1080.
Again, the problem seems to appear at widescreen displays only.
Related
A very weird thing happened a couple of hours ago. I am developing a new site - which is already live Utopia Africa - using laravel & bootstrap. I am normally using Firefox on my mac to view the local site. Suddenly everything started to be rendered "big" by Firefox as for a cellphone but with text extremely big (see image below) and all logos/images at full size (although img-fluid). The size of text and images do not change when resizing the window. I tried everything like clearing cache, rebooting... However, the same local site is perfectly rendered on chrome, opera & safari. And once again, the same source file (I compared them) is rendered well on firefox when on the live server (as the above link shows). I am pulling my hair off with this one... any idea?
Have you zoomed Firefox by accident? Press CTRL + 0 to set the viewport zoom to 100% instead of 300% it is now on.
Firefox zoom option:
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
I'm having an issue on a project we are working on right now.
Chrome on Android tablet and on Windows Desktop does not print the whole generated pages. The problem occurs randomly (1 time every 6/7 print preview) on Chrome (never on OSX Desktop...).
On Windows desktop, changing the zoom print parameter to 99% eliminates the problem (seems like it redraws the pages and eliminates the problem).
The project is a simple HTML/CSS page generated by Symfony.
Still looking for a solution, any idea ? ...
I can't for the life of me figure out why the same font that I build using gulp-iconfont renders so wildly different on Windows vs. basically all other OSes, including mobile OSes. I've tested practically all of them through Browserstack, and consistently all browser running on Windows render the font with a massive amount of space above/below each icon while all other platforms render as expected.
I highlighted the elements using the inspector for the following screenshots:
Windows:
macOS:
I think I have narrowed it down to be the font rendering, as when I change the font-family in the css, the spacing around the characters evaporates. I have messed around with the gulp-iconfont options (fontHeight is set to 1024 and font is being normalized) without success.
Is my only option to let go of compiling my own iconfont and just using svg's, or does anyone know what I might be doing wrong? I feel the stench of defeat upon me so any faint scent of hope would make me simmer with joy.
I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.
Steps to reproduce (from a desktop computer):
Start with a blank Google Chrome tab, full screen
Visit http://twitter.github.com/bootstrap/
Gradually make the window narrower, letting go the mouse every 100 pixels or so.
Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
Now make the window thick again, letting the mouse go after every 20 pixels or so.
Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.
I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)
The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).
So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.
I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?
If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.
Link to the Github Issue
I was reviewing the CSS docs for version 4.6 and saw this in the doc:
"In BlackBerry Device Software version 4.6, the BlackBerry Browser provides full support for CSS 2.1, excluding pseudo-elements and dynamic pseudo-classes, system fonts, and generated content."
I am running the 4.6.0.190 emulator for the bold and I cannot get any padding to work. My other CSS is working fine, such as font family and font size but that is about it. Anything related to the box model (margins, padding) and positioning does not work and according to the docs, it should.
Any suggestions?
One thing I've noticed doing development on the BlackBerry emulator is that it is very inaccurate in a lot of situations compared to the actual device.
Unfortunately I don't have a list of what things work or don't work the same as the physical device on the emulator, however I've noticed several small discrepancies that make it (in my opinion) almost useless to rely upon for development.
Many of these discrepancies are box model related. For example, the padding on the real BlackBerry Bold behaves properly, while the emulator gives more padding than it should, causing things to render wrong.
Box model related things do work on the emulators I've tried, however I've had some problems, especially related to widths of elements, however not the same issues you've described.
My recommendation is to get your hands on a BlackBerry Bold to really see what everything looks like.