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
Related
I want to create a presentation using reveal.js. The slides are automatically scaled to fit the browser window.
However, in Firefox (47), the font is really blurry, both on Windows 10 and Fedora. Chrome looks fine on both systems, so does Edge.
I've put a comparison image below: It shows the 'V' from the reveal.js demo page. As you can see, Chrome and Edge have about 1 pixel of "antialiasing boarder", while Firefox shows about 3 pixel. That's really hard on the eye...
What can I do to get a crisper presentation in FF?
I am trying to allow user to crop their images in Drupal 7.
I am using the imagefield crop module and also tried the manual crop module.
Both work great in Chrome.
In IE10 for imagefield crop the image shrinks and doesn't expand - I end up with large white areas in the preview area. Also the preview squishes the image so as not to keep the aspect ratio.
Bizarrely when the image is then saved it has the proper aspect ratio on display?
For manual crop I get an alert message to say "It appears that some of the images could not be loaded for cropping, please try again in another browser."
It also appears to work fine in IE11 on windows 8 machine...
Thanks for any help!
Have you tried using the edge tools (Developer tools) - f12 on Windows 8 to try and replicate it in IE10
I'm working on a new website design and I'm having an issue with it. The site is http://www.paulietheboss.com/ - I'm only really focused on the homepage right now till I get this problem sorted out.
I'm trying to make the theme fully responsive, however if you resize the browser window and it gets between ~1027px and ~1065px wide a scrollbar appears at the bottom and part of the right hand side of the site gets cut off - try it and you'll see what I mean - any ideas?
(The width values I listed are in chrome, but the same seems to happen in other browsers at slightly different sizes)
A similar issue happens viewing on an ipad3 in landscape, but I believe it is related somehow.
There is an embedded Vimeo video on a site I'm developing. Nearly all of the target audience uses IE8 or below, and for reasons unknown nearly all of them have their browsers zoomed to 125% view. Thankfully everything else on the site works under those conditions, but the video in the iframe is zooming oddly and cutting off content.
http://imgur.com/a/pg53V
That is an album with the iframe normally and zoomed, as well as the embed code provided by Vimeo. There is absolutely nothing special in my CSS or JS that changes the iframe's default properties. I'm certain I'm not the first one to have this problem, but apparently I just don't know how to ask the question to lord Google. Thanks for your help.
Internet Explorer 8 will automatically zoom to 125% by default if your display settings are set to 120 DPI. This does however sometimes confuse plugins such as Silverlight and Flash. It is possible to detect the zoom level in script and you could potentially use this to make adjustments. See Making the Web Bigger: DPI Scaling and Internet Explorer 8.
I need help determining what the cause of a serious visual glitch is with one of my production websites. It is only happening with Safari - Chrome and all other browsers are fine.
http://www.philanthropicdirectory.org/search
This is a Drupal 6.x website, running the following simultaneously:
jQuery 1.3.2 (Drupal base/default)
jQuery 1.4.4 (This is used here and there by overriding the jQuery namespace to '$js' for certain advanced operations 1.3.2 can't handle)
jQuery UI 1.7.3
Thickbox 1.8.2.19 (I've slightly modified this .js)
TO REPRODUCE:
Click link (visit the page): http://www.philanthropicdirectory.org/search
Click twice (once to center) on any of the 5 'coverflow' panels to trigger Thickbox content
Once TB content loads, resize the browser window horizontally left or right
Notice the odd background-image and background-color offsetting
Switch between any of the 5 'tab' icons in the upper right of the modal system
At any point, use Web Inspector to uncheck and then recheck any CSS property, anywhere
Notice how this instantly clears/fixes all visual glitches
Resize the browser window again or tab between the other tabs, and notice the glitches return.
If you notice the same things I am, it'd be great to get your machine config and Safari version.
Before
After resizing
After tabbing
The images say it all, and as far as I could test, I can only reproduce this problem in the following setup, with Safari:
MacPro, 6-core Xeon (2010)
OS X 10.6.8
2 monitors: 1x 23" Cinema Display (old silver one) + 1x 27" Apple Cinema Display
ATI Radeon HD 5770 (Mac version w/01.00.436 Driver)
Safari 5.1+
I've tested other machines and other machines with earlier versions of Safari (4.x), and the problems are simply not present.
Is there anything you think I can test to figure out why this is happening?
PS: Only using one monitor at a time produces the same problems.
SOLUTION!
I noticed this happening with another website we've built - a website with nothing in common with the Drupal one with the problem here, save for the fact that this new one also has a Flash (SWF) file in the body, and I was applying a CSS property to an element with a negative z-index value.
It was happening on this new website because the container for the object in the HTML was set to
z-index: -1;
in order for elements positioned to overlap the object could be clicked on (otherwise, links on top of the object could not be interacted with).
I was able to permanently fix it by instead setting any elements positioned on top of the object
z-index: 1; /* or anything > 0 */
Given that solution, I hunted down any and all "z-index: -1" CSS on the Drupal website and sure enough there was an element within the Thickbox container that was shown on every tab - the big green "SEARCH" input button. It was styled that way because of visual needs (something to do with the fake inner-drop-shadow on the button).
I disabled the entire z-index property for this element, and lo-and-behold, the funkiness permanently disappeared on the Drupal website.
Hurray! It was surely providence that I came across the same issue more acutely on a different website.
Now I'm not sure the exact bug in Safari that is behind this without intense testing, but all I do know is that an object on the page + any element near it set to z-index: -1 equals total meltdown (on a Mac running Safari 5.x).
I checked in Safari 5.1 (7534.50) on an HP Xeon running Windows 7. I don't see any glitches.
That's weird. Sounds like a race condition of some sort. Maybe there is a bug in your ATI driver? Since it fixes itself when you re-render it, perhaps you could introduce some delay somewhere which might give it more time to render properly?